如何添加jquery字数统计和限制在php代码之间


How to add jquery word count and limit in between php code

我有一个文本区域计数的代码。它工作得很好,但一旦我嵌入它,就像我下面所做的,它不工作,没有错误被抛出。我已经吃了3天了。如果你能帮我,我会很感激的。

<div class="row">
    <label for="name" class="control-label">
    <?php if(isset($data['career_objective']) && $data['career_objective']!=''){?>
          <p id="c_obj" class="text-info first " data-type="textarea" name="comments2"  onclick="return update('c_obj' ,'career_obj' ,'Career Objective'); "><?php echo $data['career_objective']; ?></p>
          <br>
          Word Count : <span id="display_count">0</span> words. Words left : <span id="word_left">50</span>
    <?php } else { ?>
          <p id="c_obj" class="text-info first " data-type="textarea" name="comments2" onclick="return update('c_obj' ,'career_obj' ,'Career Objective'); ">Career Profile and Work objectives here. Not more than 50 words.</p>
    <?php }?>
    </label>
<div class="controls">
    <a href="#" class="btn pen c_obj1"><span class="glyphicon redcolor first" aria-hidden="true">Edit</span></a>
</div> </div>
Jquery部分
$("#c_obj").on('keyup', function() {
var words = this.value.match(/'S+/g).length;
if (words > 50) {
  // Split the string on first 200 words and rejoin on spaces
  var trimmed = $(this).val().split(/'s+/, 50).join(" ");
  // Add a space at the end to make sure more typing creates new words
  $(this).val(trimmed + " ");
  alert("You reached your limit of 50 words.");
}
else {
  $('#display_count').text(words);
  $('#word_left').text(50-words);
} });

从下面的html元素来看,我很确定您正在使用第三方库来创建一个textarea元素,以便以编程方式接收用户输入。

<p id="c_obj" class="text-info first " data-type="textarea" name="comments2" ...

现在,$('#c_obj').on(..绑定了p标记上的事件,而不是您想要检查单词计数的textarea元素。原因可能是textarea还不存在,或者它是在用户发起一个操作后动态创建的。

<<p> 解决方案/strong>:

将事件绑定到body或父元素上,并将keyup事件委托给目标文本区域。

$(".parent-div").on('keyup', 'textarea', function(e) { ...

parent-div可以是form元素,也可以是最接近的父元素。

查看这里的示例代码- http://codepen.io/chainat/pen/VmmmKg

Id必须以#

作为引用
$("#c_obj").on('keyup', function() {