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

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値です。私たちの場合、それはです。nametextareamyLife

    <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他の要素または要素について、手順1と2を繰り返すことができますinput。

こちらをご覧ください。

于 2013-01-04T18:23:16.907 に答える
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 に答える
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 に答える
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 に答える