3

最近、テキストボックスに入力したときにすべての表示文字をキャプチャすることを含む、対処するのが最も難しいという珍しい要求がありました。設定は次のとおりです。

最大長が10文字のテキストボックスがあります。ユーザーが10文字を超えて入力しようとすると、文字数の制限を超えて入力していることをユーザーに通知する必要があります。

最も簡単な解決策は、最大長を11に指定し、すべてのキーアップで長さをテストし、10文字に切り捨てることですが、この解決策は少し厄介なようです。私がやりたいのは、キーアップの前にキャラクターをキャプチャし、それが表示キャラクターであるかどうかに応じて、ユーザーに通知を提示し、デフォルトのアクションを防ぐことです。

多くの国際データを処理するため、ホワイトリストは難しいでしょう。

keydown、keypress、 keyupのすべての組み合わせを試し、 event.keyCode、event.charCode、event.whichを読み取りましたが、すべてのブラウザーで機能する単一の組み合わせを見つけることができません。私が管理できる最善の方法は、> = IE6、Chrome5、FF3.6で正しく機能するが、Operaでは失敗する次のことです。

注：次のコードはjQueryを利用しています。

$(function(){
  $('#textbox').keypress(function(e){
    var $this = $(this);
    var key = ('undefined'==typeof e.which?e.keyCode:e.which);
    if ($this.val().length==($this.attr('maxlength')||10)) {
      switch(key){
        case 13: //return
        case 9:  //tab
        case 27: //escape
        case 8:  //backspace
        case 0:  //other non-alphanumeric
          break;
        default:
          alert('no - '+e.charCode+' - '+e.which+' - '+e.keyCode);
          return false;
      };
    }
  });
});

私がやっていることはおそらくソリューションを過剰に設計していることを認めますが、私はそれに投資しているので、ソリューションについて知りたいと思います。

4

4 に答える 4

1

最も簡単な解決策は、最大長を11に指定し、すべてのキーアップで長さをテストし、10文字に切り捨てることですが、この解決策は少し厄介なようです。

また、カット/ペースト、ドラッグ/ドロップ、右クリック-元に戻す/やり直しなどによって簡単に無効になります。ポーリング以外の入力のすべての潜在的なビットを取得する信頼できる方法はありません。

maxlengthブラウザに制限を適切に適用させ、別のキー押下が試行された場合に警告を表示するために、10に設定しないのはなぜですか？ブラウザがすでに長さを処理しているため、デフォルトのアクションを防ぐ必要はありません。そのため、実行する必要のあるキーチェックの量は少なくなります。

<input id="x" maxlength="10"/>
<div id="x-warning" style="display: none;">can't type any more!</div>
<script type="text/javascript">
    function LengthMonitor(element, warning) {
        element.onkeypress= function(event) {
            if (event===undefined) event= window.event;
            var code= 'charCode' in event? event.charCode : 'which' in event? event.which : event.keyCode;
            var full= element.value.length===element.maxLength;
            var typed= !(code<32 || event.ctrlKey || event.altKey || event.metaKey);
            warning.style.display= (full & typed)? 'block' : 'none';
        };
        element.onblur= function() {
            warning.style.display= 'none';
        };
    }

    LengthMonitor(document.getElementById('x'), document.getElementById('x-warning'));
</script>
于 2010-04-21T17:25:07.817 に答える
0

すでにJQueryを使用しているので、.validate()フォームにとっては素晴らしいことです。フィールドにmaxlengthのルールを設定するだけで、準備は完了です。例えば

$("form[name='myform']").validate({
    rules: {
        myfield: {required:true, maxlength:10}
    }
});
于 2010-04-21T16:25:15.313 に答える
0

私が取り組んでいるWebアプリで、ユーザーがデータを入力に入力したときに、ライブでユーザーにフィードバックを提供する必要があるという、漠然と似たような状況が発生しました。

正直なところ、私が思いついた最善の解決策は、setTimeoutを使用して入力ボックスを定期的にポーリングすることでした。応答性と効率のバランスをうまくとるために、いくつかのテストを行いました（約400msだと思います）。

これはうまく機能し、すべてのシナリオ（キーダウン、変更時など）のイベントハンドラーをまとめようとするよりもはるかに優れています。

私が望むほどエレガントではありませんが、機能します。

本当にこれを実行したい場合は、入力をリアルタイムで監視し、長さを確認します。制限を超えている場合は、それを切り刻んでユーザーに警告します。

もちろん、これは他の検証に代わるものではありません。

また、これは不要かもしれないと思います。それは素晴らしいことだと思いますが、ほとんどのWebサイトは、厳しい制限と提出時の検証でうまくいきます。

于 2010-04-22T01:45:29.017 に答える
0

ユーザーが制限を超えたときにメッセージを表示し、入力を切り捨てないようにするのはどうですか？onsubmitイベントを使用して送信を防ぐことができ、ユーザーはmaxlengthまたは一時的な入力のエクスペリエンスが低下することはありません。ボックスを赤で強調表示したり、アイコンを表示したりして、ポイントを実際に家に帰すことができます。

ただし、これはすべてクライアント側であるため、入力を本当に検証する必要がある場合は、送信ターゲットのサーバー側ロジック（フォームの場合）に組み込む必要があります。

または、これがリアルタイムで発生している場合は、キーアップイベントによって設定された変数にロジックをリンクします。長さの制限を超えた場合は、エラーメッセージを表示し、切り捨てたり、プライベート変数を更新したりしないでください。

于 2010-04-27T01:15:07.823 に答える