我有一个文本区域计数的代码。它工作得很好,但一旦我嵌入它,就像我下面所做的,它不工作,没有错误被抛出。我已经吃了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还不存在,或者它是在用户发起一个操作后动态创建的。
将事件绑定到body或父元素上,并将keyup
事件委托给目标文本区域。
$(".parent-div").on('keyup', 'textarea', function(e) { ...
parent-div可以是form元素,也可以是最接近的父元素。
查看这里的示例代码- http://codepen.io/chainat/pen/VmmmKg
Id必须以#
作为引用$("#c_obj").on('keyup', function() {