2009-03-11 26 views
5

JavaScriptを使用して入力フィールドにmaxlengthを動的に設定しようとしています。どうやらそれはIEの問題であり、私は解決策の一部を見つけました。javascriptを使用してmaxlengthを設定する

$("input#title").get(0).setAttribute("max_length", 25); 
$("input#title").get(0).setAttribute(
         "onkeypress", 
         "return limitMe(event, this)"); 

function limitMe(evt, txt) { 
    if (evt.which && evt.which == 8) return true; 
    else return (txt.value.length < txt.getAttribute("max_length"); 
} 

これは、いくつかの理由でFirefoxではなく、IEで動作します。しかし、それは次のように設定された入力フィールド上で動作します:

<input type="text" max_length="25" onkeypress="return limitMe(event, this);"/> 

しかし、入力フィールドが動的に作成されているので、私はこれを行うことはできません...任意のアイデア?

答えて

8

jQueryを使用している場合、その抽象化を十分に活用してみませんか?

など。

の代わりに:

$("input#title").get(0).setAttribute("max_length", 25); 
$("input#title").get(0).setAttribute(
         "onkeypress", 
         "return limitMe(event, this)"); 
function limitMe(evt, txt) { 
    if (evt.which && evt.which == 8) return true; 
    else return (txt.value.length < txt.getAttribute("max_length"); 
} 

ことは、これを実行します。

$('input#title').attr('maxLength','25').keypress(limitMe); 

function limitMe(e) { 
    if (e.keyCode == 8) { return true; } 
    return this.value.length < $(this).attr("maxLength"); 
} 

編集を:それはIEで働いていない理由は、おそらくあなたは 'onKeyPressイベント' ハンドラを添付する方法であり、経由setAttribute - これはイベントハンドラを登録する適切な方法ではありません。

+1

とjQueryのattr()が実際にmaxlengthを適切な方法で設定していることがわかったので、私自身の関数を使う必要はありません。優れた!ありがとう (: – peirix

5

あなたが探している属性はmaxlengthで、max_lengthではありません。 hereを参照してください。

+0

申し訳ありませんが、私はあなたが動的にIEで「MAXLENGTH」を設定することができないという事実が含まれている必要があります。ここではinputイベントを使用して、私のソリューションです。 – peirix

2

maxlengthをJavaScriptで設定する場合、他の誰かがmaxlengthを好きなものに簡単に変更できることを忘れないでください。送信されたデータをサーバー上で検証する必要があります。

0

私は@Jamesからの答えにいくつかの問題があったので、コピー貼り付けをしても、特にIE8で作業しているときにも機能しました。私の実装では、jQueryとそのライブイベントを使用します。

0

私のコードでも、書かれた/最大の文字が印刷され、その部分は無視されます。

$("[maxlength]").bind("keyup focusin", function(){ 
    var maxkey = $(this).attr("maxlength"); 
    var length = $(this).val().length; 
    var value = $(this).val(); 
    $(this).parent().find(".counter").text(length+"/"+maxkey); 
    if (length > maxkey) $(this).val(value.substring(0, maxkey)); 
}).bind("focusout", function(){$(this).parent().find(".counter").text("")}); 
2

IEは、ケースはのsetAttribute()とのみ "maxLengthの" に敏感で動作します...

var el=document.createElement('input'); el.setAttribute('maxLength',25); 
1

すべての答えここでキー入力/ペーストイベントに依存しています。

$('input').on('input', onInput); 

var inputValue = ''; 

function onInput(e) { 
    if(e.currentTarget.value.length > 30) { 
     e.currentTarget.value = titleValue; 
     return; 
    } 

    inputValue = e.currentTarget.value; 
} 
関連する問題