为foreach循环添加字符计数函数
Add character count function to foreach loop
我创建了一个字符计数函数,该函数计算使用的字符长度并在每个键up处显示它们。它在循环外工作得很好,但当我将它添加到每个循环之前添加新行时,它不工作。
下面的代码显示了循环中的所有内容,注释和描述部分是包含字符计数的类:
<div class="row">
<div class="span18">
<h2 class="PIMS3">Task Details</h2>
<div id="taskList">
<div class="row">
<div class="span1">Dept</div>
<div class="span1">Skill</div>
<div class="span3">Description</div>
<div class="span3">Notes</div>
<div class="span6">Budget</div>
</div>
<div data-bind="foreach: tasks">
<div class="row">
<div class="span1"><select class="span1" data-bind="options: $parent.departmentList, value: department"></select></div>
<div class="span1"><select class="span1" data-bind="options: skillList, value: skill"></select></div>
<div class="span3"><input class="span3" name = "description" id="textAreaDescriptions" data-bind="value: description" placeholder="Max Character Limit 50" maxlength="50" >
<div id="char_namb2" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:50:0</div>
</div>
<div class="span3"><input class="span3" name = "notes" id="textAreaNote" data-bind="value: notes" placeholder="Max Character Limit 150" maxlength= "150">
<div id="char_namb3" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:150:0</div>
</div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Hours: <input class="span1" placeholder="Hours" data-bind="value: budget_hours"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Cost Rate: <input class="span1" placeholder="Cost Rate" data-bind="value: budget_cost_rate"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Charge Rate: <input class="span1" placeholder="Charge Rate" data-bind="value: budget_charge_rate "</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Cost: <input class="span1" placeholder="Other Cost" data-bind="value: budget_other_cost"</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Charge: <input class="span1" placeholder="Other Charge" data-bind="value: budget_other_charge"</input></div>
</div>
</div>
</div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-success" data-bind="click: addTask"><i class="icon-plus icon-white"></i> Add Task</a>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-primary" data-bind="click: save,visible: isValid() && !isSubmitting() "><i class="icon-ok icon-white"></i> Create Job</a>
<a class="btn btn-info" data-bind="click: save,visible: isSubmitting"><i class="icon-ok icon-white"></i> Saving ... ...</a>
</div>
</div>
</div>
</div>
</div>
这个代码片段包含字符计数函数的脚本,该函数位于循环之外。
<script>
$(function(){
$('#textAreaDescriptions').keyup(function(){
var charsno2 = new $(this).val().length;
$('#char_namb2').html("Character Count:50 : " + charsno2);
});
});
<script>
$(function(){
$('#textAreaNote').keyup(function(){
var charsno3 = $(this).val().length;
$('#char_namb3').html("Character Count:150 : " + charsno3);
});
});
有谁知道我怎么才能让这个工作吗?
谢谢!
尽管您使用的是Javascript而不是PHP,但请尝试将您的函数放入
$( document ).ready()
我认为你是在DOM加载
之前将事件绑定到输入* * * * * * * *编辑
我认为你的代码有几个问题。查看此链接https://jsfiddle.net/ivan0013/fmu9bj35/1/,其中您有一个示例工作。相关文章:
- 如果文本或值以字符开头,请运行函数
- 仅在单个页面中运行字符计数javascript函数
- 将具有特殊字符的值传递给函数onclick事件
- 在 Javascript 函数中对参数值使用特殊字符时出现 Javascript 错误
- 将字符串值传递到包含特殊字符的 JavaScript 函数中
- 为什么不'当用户输入空格或字符太多/不够时,此函数会发出window.alert
- 带有Ajax请求的Javascript JSON.parse函数n〃;新行转义字符
- 在javascript中使用单字符变量或函数名是否可以接受
- 为什么不'我的javascript函数允许点,但允许连字符
- 为javascript函数提供可能包含特殊字符的字符串参数
- 编写函数,通过1个字符的JavaScript匹配单词
- 使用Jquery Keydown函数删除字符
- 用特殊的字符将值从一个函数传递到另一个函数
- javascript(jquery)函数中的转义特殊字符
- 创建一个可链接的函数,用于规范化一小组特殊字符
- 如何使字符“[”和“]”作为正则表达式()函数中的模式
- Javascripts 中的字符函数是 ret false,即使字符不满足 if 条件
- 通过jquery AJAX函数获取奇怪的字符
- 如果文本字段中的字符等于某个数字,我想触发一个函数
- 导出 html 表到 Excel JavaScript 函数特殊字符已更改