0

いいえを制限することになっているスクリプトがあります。テキストボックスまたはテキストエリアに入力された文字数。maxlength 属性を使用してこれを実行できることはわかっています。しかし、私はJS実装を使いたいです。

以下はフィドルです：

http://jsfiddle.net/xTrKD/

コード：

$(function() {
function limitText(limitField, limitNum) 
    { 
        if (limitField.value.length > limitNum)
            { 
                limitField.value = limitField.value.substring(0, limitNum);
                }
        }

})​

HTML:

<input type="text" id="sessionNo" name="sessionNum" onKeyUp="limitText(this,5);" />
4

6 に答える 6

5

まず、フィドルを操作します：http: //jsfiddle.net/Ralt/xTrKD/2/

2つのエラーがありました：

  • 関数はlimitText関数内で定義されているため、$(function(){})関数外では使用できません。（HTMLのように。）
  • フィドルが正しく構成されていませんでした。左側のオプションを参照してください。

ちなみに、JavaScriptをHTMLに入れるのは悪い考えです。コンテンツと動作を混ぜ合わせています。このような種類のソリューションを使用して、懸念事項を分離することをお勧めします。

$(function() {
    $('input').on('keyup', function() {
        limitText(this, 5);
    });

    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
    }
});
于 2012-12-21T12:55:12.730 に答える
2

作業フィドルの例。

これには多くのコードは必要ありません。

function limitText(limitField, limitNum) {
    if([8, 37,38,39,40, 46].indexOf(event.which) == -1) // If the currently pressed key is not the backspace(8), arrow keys(37-40), or delete(46);
    return limitField.value.length < limitNum;          // Check the input field's length.
}

あなたの html にareturnステートメントを追加し、を に変更したことに注意してください。inputonKeyUponKeyDown

falseaに戻るとonKeyDown文字が入力できなくなります。これの利点は、入力された文字が削除される前に一瞬フラッシュしないことです。

、、およびキーがまだ機能することを確認するためのif例外です。backspace(8)arrow keys(37-40)delete(46)

数字の配列はキーのキーコードです。現在押されているキー ( event.which) がそれらのいずれでもない場合、 indexOf()-1 が返されるため、関数は長さを確認できます。

于 2012-12-21T12:58:03.190 に答える
1

上記の私のコメントからさらに

http://jsfiddle.net/xTrKD/1/

$(function () {
    $('input').on('keyup', function (e) {
        limitText(this, 5);
    });

    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
    }
})​;
于 2012-12-21T12:54:40.427 に答える
1

limitTextグローバル名前空間に公開していません。window.limitTextイベントハンドラが見つけられるように、に割り当ててみてください。または、jQuery を使用して、クロージャー内から keyup にバインドします。

于 2012-12-21T12:56:24.063 に答える
0

さらに別の解決策：

<input type="text" id="sessionNo" name="sessionNum" myMaxLength="5" />​​​​​​​​​​​​​​​​​​​​​​​​​​​

$('#sessionNo').on('keypress', function(e) {
    if ($(this).val().length >= $(this).attr('myMaxLength'))
        return false;
});
​
于 2012-12-21T13:21:46.447 に答える
0

ワーキングフィドル（頭にjQueryとコードはありません）http://jsfiddle.net/xTrKD/7/

入力：

<input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" />​

Javascript:

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}​
于 2012-12-21T12:58:54.937 に答える