textarea中的jquery字符倒计时

Question

我想提供一个视觉效果,向用户显示当他们在响应中键入时,有多少字符保留在文本区域中.我的代码在下面工作!但我有点拼凑逻辑并且有很多重复.是否有更好的方法来编写下面的jquery,它更易于维护和简洁？

HTML

<td colspan="4" style="text-align:center;">
     NOTES<br>
     <textarea class="sam_notes maxed" maxlength="750" name="sam_notes" style="height:100px;width:90%;margin:0 auto;"></textarea>
     <br>
     <span style="font:normal 11px sans-serif;color:#B00400;">
         <span class='counter_msg'></span>
     </span>
</td>

JQUERY

(function() {
     $(document).on('focus', '.sam_notes', function(e){
      var msgSpan = $(this).parents('td').find('.counter_msg');
      var ml     = parseInt( $(this).attr('maxlength') );
      var length = $(this).val().length;
      var msg = ml - length + ' characters of ' + ml + ' characters left';

      msgSpan.empty().html(msg);
    });

    $(document).on('keyup', '.sam_notes', function(e){
      var msgSpan = $(this).parents('td').find('.counter_msg');
      var ml     = parseInt( $(this).attr('maxlength') );
      var length = $(this).val().length;
      var msg = ml - length + ' characters of ' + ml + ' characters left';

      msgSpan.empty().html(msg);
    });
})();

Answer 1

这是一种方式:

$('td').on('focus keypress', '.sam_notes', function (e) {

    var $this = $(this);
    var msgSpan = $this.parents('td').find('.counter_msg');
    var ml = parseInt($this.attr('maxlength'), 10);
    var length = this.value.length;
    var msg = ml - length + ' characters of ' + ml + ' characters left';

    msgSpan.html(msg);
});

这是一个演示:http://jsfiddle.net/hungerpain/8gKs4/2/

这是我按行顺序改变的:

1. 删除document并将其更改为td.这样事件不会冒泡到父母.
2. 改keyup到keypress.keyup如果用户没有从键盘上移开他的手指,将无法工作.keypress捕获keyup和keydown.
3. 因为你具有同样的东西focus和keypress,为什么不加入他们的行列？
4. 您正在使用$(this)两次,因此将其缓存以便以后重复使用.(我知道......我知道......我在挑剔)
5. 添加了一个基数parseInt,这是一个JSLINT规则.基数是您添加的额外数字parseInt.请查看此答案以获取更多信息.
6. 改$(this).val()到this.value,这是更天然.
7. 删除empty().由于您已经在使用html(),因此不需要这样做.

希望这可以帮助!