0

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

这是我试图将其应用于的代码：

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

4 回答 4

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");​
于 2013-01-04T18:36:14.247 回答
1

如果您正在寻找 jQuery 解决方案，您可以使用这些方法。例如，对于您的问题中显示的textarea属性name设置为。myLife

<textarea name="myLife"></textarea​​​​​​​​​​​&gt;

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

    <textarea name="myLife" maxlength="1350"></textarea​​​​​​​​​​​&gt;

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

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

  3. 使用以下脚本更新span每个笔划的元素。该脚本将应用于任何textarea具有maxlength属性和具有链接到它的属性的span元素。data-limit-for

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

看这里。

于 2013-01-04T18:23:16.907 回答
0

这应该适用于基本思想：

<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);
      });
于 2013-01-04T18:01:19.703 回答
0

试试这个：

$('#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/

这只是一个基本的想法。

试试看这是否对你有帮助。

于 2013-01-04T18:21:57.080 回答