web-dev-qa-db-ja.com

jqueryを使用したtextareaの最大文字数

私は次のコードを持っていますが、次に何をすべきかにこだわっています。アイデアは、テキスト領域にテキストを入力すると、カウンターが残っている文字数を教えてくれます。最大文字数に達したら、文字の入力を許可しないか、入力されたすべての文字を削除して、テキスト領域に10文字しか入力しないようにします。 alert("LONG");と書かれている場所にコードを配置する必要があることは知っていますが、何がわからないのかわかりません。

var maxLen = 10;
        console.log("Start");
        $('#send-txt').keyup(function(){
            var Length = $("#send-txt").val().length;
            var AmountLeft = maxLen - Length;
            $('#txt-length-left').html(AmountLeft);
            if(Length >= maxLen){
                alert("LONG");
            }



        });
javascriptjqueryvalidationtextarea
23
Bill

ここに行きます。文字数制限を超えるものはすべて削除されます。

$('textarea').keypress(function(e) {
    var tval = $('textarea').val(),
        tlength = tval.length,
        set = 10,
        remain = parseInt(set - tlength);
    $('p').text(remain);
    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
        $('textarea').val((tval).substring(0, tlength - 1));
        return false;
    }
})

http://jsfiddle.net/JCehq/1/ で動作例を確認してください

26
Hussein

これらの答えはすべて、少しやり過ぎを試みるという点で少し奇妙です。よりシンプルで視覚的に楽しい方法（テキストがすぐに切り取られることを示しているため）-そして前の例（奇妙なことに、最後のキーを上書きする方法に注意してください）よりも-keyUpの文字数を切り取る許可されている数に。

        var textlimit = 400;

        $('textarea').keyup(function() {
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, textlimit));
            var tlength = $(this).val().length;
            remain = textlimit - parseInt(tlength);
            $('#remain').text(remain);
         });

上記の例の一部ではできないように、これはテキストでの貼り付けにも機能することに注意してください。

ここの例： http://jsfiddle.net/PzESw/5/

38
daprezjer

Falseを返し、.keyup（）の代わりに.keypress（）を使用すると、長さに達すると入力が停止します。 jsFiddleの例を次に示します。

http://jsfiddle.net/p43BH/1/

バックスペースを許可するように更新されました。

3
Steve Claridge

これで手に入れました：

$("#div_id").prop('maxlength', '80');

このソリューションに何か問題があるかどうかは本当にわかりませんが、うまくいきました。

3
user3460837

これを行う簡単な方法は、textareaのテキストを全量の部分文字列に設定することです。ここに例を見つけることができます：

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

2
Mark Hildreth

Jsを次のように変更すると、うまくいくはずです。

var $txtLenLeft = $('#txt-length-left'); // lets cache this since it isn't changing
$('#send-txt').keydown(function(e) { //take the event argument
   var Length = $(this).val().length; // lets use 'this' instead of looking up the element in the DOM
   var AmountLeft = maxLen - Length;
   $txtLenLeft.html(AmountLeft);
   if(Length >= maxLen && e.keyCode != 8){ // allow backspace
      e.preventDefault(); // cancel the default action of the event
   }
});

ここで実際の例を見ることができます： http://jsfiddle.net/aP5sK/2/

1
Martin Jespersen

ehm、textarea maxlengthはhtml5の有効な属性ですか？ ie9ではサポートされていません。それだけです。

w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength

w3fools http://www.w3schools.com/tags/att_textarea_maxlength.asp

1
commonpike

maxlenghtproperty +jquerykeydown、keyup、pasteイベントを使用する最良の方法だと思います

// text input maximum lenght
$(document).on('keydown keyup paste', 'input[type=text]', function(e) {
  var textArea = $('input[type=text]').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-title').text(remain);
  if (textLenght > 500) {
    $('textarea').val((textArea).substring(0, limit))
  }
});

// tex area maximum lenght
$(document).on('keydown keyup paste', 'textarea', function(e) {
  var textArea = $('textarea').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-description').text(remain);
  if (textLenght > 500) {
    $('textarea').val((textArea).substring(0, limit))
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Title</label>
  <p id="remain-title"></p>
  <input type="text" placeholder="Enter Title" maxlength="500"/>
</div>
<br>
<hr>
<br>
<div>
  <label>Description</label>
  <p id="remain-description"></p>
  <textarea placeholder="Enter custom description" rows="4" maxlength="500"></textarea>
</div>

JSFiddleを参照

0
EgoistDeveloper

これは完璧に機能し、他のいくつかのソリューションと同様に、テキストエリアの余分な文字を削除する前にフラッシュしません。

<h1>Add a comment:</h1>
<form>
    <textarea name="commentText" id="commentText"></textarea>
</form>
<br><span id="commentChars">1000</span> characters remaining

<script type="text/javascript">

    function checkChars(){
        var numChars = $('#commentText').val().length;
        var maxChars = 1000;
        var remChars = maxChars - numChars;
        if (remChars < 0) {
            $('#commentText').val($('#commentText').val().substring(0, maxChars));
                remChars = 0;
            }
        $('#commentChars').text(remChars);
    }

    $('#commentText').bind('input propertychange', function(){
        checkChars();
    });

    checkChars();

</script>
0
Dorian Fabre

HTML5データ属性を使用して、必要なすべてのテキストエリアに自動的にバインドするソリューションを次に示します。

$('textarea[data-max-length]').live('keypress', function(e) {
    if (String.fromCharCode(e.charCode || e.keyCode).match(/\S/) && $(this).val().length >= $(this).attr('data-max-length')) {
        e.preventDefault();
    }
});
0
Mika Tähtinen

私はこれが少し遅いことを知っていますが、私もこれを理解しなければなりませんでした。 UTF8バイト長で動作するようにし、特定のキー入力を許可する必要がありました。ここに私が思いついたものがあります：

checkContent = function (event) {

    var allowedKeys = [8,46,35,36,37,38,39,40];
    var contentLength = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    var charLength = lengthInUtf8Bytes(String.fromCharCode(event.charCode));

    if (charLength + contentLength > 20) {

        if(jQuery.inArray(event.keyCode, allowedKeys) == -1) {
            event.preventDefault();
        } 
    }
}

countLength = function(event) {

    var len = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    jQuery('#length').html(len);
}


lengthInUtf8Bytes = function(str) {
    var m = encodeURIComponent(str).match(/%[89ABab]/g);
    return str.length + (m ? m.length : 0);
}

jQuery(function(){jQuery("#textarea").keypress(function(event){checkContent(event)}).keyup(function(event){countLength(event)})});

Id #textareaのtextareaと、id #lengthの現在の長さを表示する要素が必要です。

Keypressイベントは、キー押下を許可するかどうかを決定します。キーアップイベントは、キー押下が許可/防止された後、フィールド内のデータのサイズをカウントします。

このコードは次のキーで機能します：home、end、pagedown、pageup、backspace、delete、up、down、left and right。クリップボードからの貼り付けは扱いません。

誰かがそれを役に立つと思うことを願っています！

0
Andrew Plank

これを試して。キーボードからのコピーペーストでも動作します。

$("#comments").unbind('keyup').keyup(function(e){
    var val = $(this).val();
    var maxLength = 1000;
    $('#comments').val((val).substring(0, maxLength));
    $("#comments_length").text($("#comments").val().length);
});
0
vinayjags
$("#message-field").on("keyup paste", function() {
  var $this, limit, val;
  limit = 140;
  $this = $(this);
  val = $this.val();
  $this.val(val.substring(0, limit));
  return $('#character-remaining').text(limit - $this.val().length);
});
0
Diego Plentz

ユーザーがキーを押さなくてもテキストエリアにデータをコピーして貼り付けることができるため、キープレス、キーダウン、キーアップに依存することは欠陥のあるソリューションです。

データがどのように取得されるかに関係なく、javascriptを使用してtextareaのテキストの長さを制限するには、代わりにsetIntervalタイマーを使用する必要があります。

setInterval(function() {
if ($('#message').val().length > 250) {
    $('#message').val($('#message').val().substring(0, 250));
}}, 500);

明らかに、テキストエリアに割り当てられたメッセージのIDがあると仮定しています。

0
Halfstop

これを試して。

var charLmt = "200";//max charterer 
 $("#send-txt").keydown(function(){
   var _msgLenght = $(this).val().length;
   if (_msgLenght > charLmt) {
   $(this).val($(this).val().substring(0, charLmt));
  }
});
0
insCode