Jquery 如何通过CodeIgniter集成keyup（）以生成字符计数器？

我目前正在构建网站的一部分，用户可以在其中编辑他们的个人资料。在他们填写信息的每个类别中，都有一个文本区域，其中包含允许他们键入的字符数。我正试图让数字在输入时倒计时。基本钥匙打开。在CodeIgniter中集成此功能的最佳方法是什么？代码点火器是否为此提供了帮助？我对这一切都是陌生的

以下是我试图将此应用于的代码：

<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

我的生活告诉我们一个关于你自己的故事（限1350个字符）
职业
（限200个字符）
提前谢谢

这应该适用于基本思想：

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

试试这个：

$('#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
});

$（'#a'）.keypress（函数（e）{//您可以在此处提供您的文本区域id#yourid
var count=1350；//如果您正在寻找一个jQuery解决方案，您可以使用以下方法。例如，对于
textarea
，将
name
属性设置为
myLife
，如您的问题所示

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


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

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


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

我会使用keydown事件，它将产生一个响应性更强的gui


html:

检查这个：这可以限制它。添加maxlength=“10”，也就是说，当用户在文本区域中键入时，我正试图让我的字符限制“1350”倒计时。谢谢。更新了小提琴查看答案。mylife来自哪里？#mylife指的是由>>echo form#U textarea（“mylife”）生成的textarea；键入
xxxxxxxxxxx
并将其复制粘贴到JSFIDLE中若干个。@siamak.A.M OP想要计算按键上的字符。退格也失败了，可能是上下文菜单也失败了（尽管我怀疑我的也会在这方面失败）。这是首选方法，但它没有做任何事情。下面是我在标题中的内容：$（“textarea[maxlength]”。每个（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）；}）；}）；​ 以下是我在html中的内容，我没有将其与我的具体内容联系起来，只是想让您编写的内容发挥作用：
（剩下200个字符）@Lightning手腕，你没有把脚本放在一个
$中。ready
。我认为它是清楚的。无论如何，我用一个ready包装器更新了我的答案。恐怕有一个隐藏的问题，因为它也不起作用。知道我应该注意什么吗？@Lightning手腕，不知道。也许不包括jQuery？我喜欢这个逻辑。你会在哪里我把输入部分放在我的代码中？它可以放在你想放的任何地方，尽管我建议放在textarea之后。我想我正试图用我已经拥有的所有元素来做这件事，而不再添加了。没有输入也可以吗？是的，用一个span（或其他什么）来替换输入，只要它与传递到
数据目标的选择器匹配
<textarea name="myLife" maxlength="1350"></textarea​​​​​​​​​​​>

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

$(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 data-max-length="1350" data-target="#theinput"></textarea>
<input size="4" id="theinput">​

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");​