我如何集成keyup()使字符计数器通过CodeIgniter

Question

我目前正在构建我的网站的用户编辑他们的个人资料的部分。在每个类别中，在他们填写信息的地方，都有一个文本区域，其中包含他们可以输入的字符数量。我正试图让数字倒计时，因为他们键入。基本键向上。如何以及什么是将这个特性集成到代码点火器中的最佳方法?代码点火器是否为此提供了帮助程序?我对这一切都很陌生。

下面是我试图将其应用于的代码:

<div class="edit_section_title">
            My Life <br /><span class="edit_section_sub">Tell us a about yourself <span class="edit_sub_text">(1350 character limit)</span>
        </div>
        <div class="edit_text_area">
        <?php
        if(empty($user['mylife']))
        {
            echo form_textarea('mylife');
        }
        else
        {
            echo form_textarea('mylife', $user['mylife']);
        }

        ?>  
        </div>
        <div class="edit_section_title">
            Occupation <br /><span class="edit_sub_text">(200 character limit) 
        </div>
        <div class="edit_input_area">
            <?php 
            if(empty($user['occupation']))
            {
                echo form_textarea('occupation');
            }
            else
            {
                echo form_textarea('occupation', $user['occupation']);
            }
            ?>
        </div>
thanks in advance

Answer 1

我会使用keydown事件，它将导致一个响应更快的gui。

http://jsfiddle.net/9BfR2/4/

html:

<textarea data-max-length="1350" data-target="#theinput"></textarea>
<input size="4" id="theinput">​

javascript:

var timer;
$("textarea[data-max-length]").on("keydown cut paste input",function(){
    var self = $(this), 
        maxlength = $(this).data("maxLength"), 
        target = $( $(this).data("target") )[0];
    clearTimeout(timer);
    timer = setTimeout(function(){
        if (self.val().length > maxlength) {
            self.val(self.val().substr(0, maxlength));
        }
        target.value = maxlength - self.val().length;
    },0);
}).triggerHandler("keydown");​

Answer 2

如果您正在寻找一个jQuery解决方案，您可以沿着这些行使用。例如，对于name属性设置为myLife的textarea，如您的问题所示。

<textarea name="myLife"></textarea​​​​​​​​​​​>

1. 添加maxlength属性到您的textarea。这将指示浏览器将最大字符数限制在给定的大小。

   <textarea name="myLife" maxlength="1350"></textarea​​​​​​​​​​​>
   

2. 添加一个具有data-limit-for属性的元素来保存剩余的字符数。data-limit-for的值是要链接到的textarea元素的name属性的值。在我们的例子中，它是myLife。

   <span data-limit-for="myLife">200</span> characters left
   

3. 使用以下脚本在每次描边时更新span元素。该脚本将适用于任何具有maxlength属性的textarea和具有data-limit-for属性链接的span元素。

   $(function() {
       $("textarea[maxlength]").each(function() {
           var $this = $(this);
           var maxlength = $this.attr("maxlength");
           var $span = $("[data-limit-for=" + $this.attr("name") + "]");
           $this.on("keyup blur", function() {
               $span.text(maxlength - $this.val().length);
           });
       });
   });​
   

对于其他textarea或input元素，可以重复步骤#1和#2。

看这里

Answer 3

这应该是基本的想法:

<script>
  $(function(){
    $(".edit_text_area textarea").keyup(function(){
     if($(this).val().length > 1350){
        $(this).val($(this).val().substr(0, 1350));
    }
  });
</script>

或者使用

$(function(){
        $(".edit_text_area textarea").prop('maxlength',1350);
      });

Answer 4

试试这个:

$('#a').keypress(function(e) { // you can give your textarea id here #yourid
    var count = 1350; // <----------max character limit
    var a = parseInt(count - $(this).val().split('').length);//<-- counting the characters
    if (a == 0) { // <----- if limit exceeds stop the keypress event.
      e.preventDefault();
      alert('character limit exceeded.'); // <---and alert the msg.
    }
    $('span').html(a);// <--- shows the characters left
});

找到这个在提琴:http://jsfiddle.net/f2hqt/1/

这只是一个基本的概念。