如何通过 CodeIgniter 集成 keyup() 来制作字符计数器？

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 解决方案，您可以使用这些方法。例如，对于textarea，name 属性设置为myLife，如您的问题所示。

<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。

See it here.

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/

这只是一个基本的想法。

试试看这对你有没有帮助。