3

したがって、入力した文字数を動的にユーザーに伝えたいと思います。「Onchange」または「OnKeyUp」の使用例をオンラインでいくつか見ていますが、どちらも古い例であり、ちょっとぎこちないようです。

より良い方法はありますか？おそらく、値を変数にバインド/割り当て (この用語を正しく使用していない可能性があります) し、変更が行われるたびにチェックする方法はありますか?

4

5 に答える 5

6

入力された文字の数を動的に表示することについて話しているときは、次のようなイベントが必要になりますonchange...onkeyup他に方法はありません。

さらに、「変数に値を割り当て、変更が行われるたびにチェックする」他の方法では、onchange何をいつチェックする必要があるかがわかりますか？

これを行うための迅速で簡単な方法：

document.getElementById('aninputId').onchange= function(e)
{
    console.log(this.value.length);//or alert(); do with this value what you want
};

覚えておくべき重要なことは、多くの要素を扱っている場合は、イベントの委任を検討することをお勧めします。ここでは、イベントの委任を扱う2つの回答を持つ同様の（重複していない）質問を見つけることができます。この強力な機能の詳細については、Googleで検索してください。

UPDATE（フィドル付き）

わかりました。イベント委任を使用する例として、この簡単なフィドルを設定しました。を使用onchangeしたので、フォーカスが失われるまで長さが表示されないので、コードの機能を説明するコメントが少しありますが、かなり急いで書かれています。この例に関して質問がある場合は、私に知らせてください。

PS：長さをリアルタイムで変更したい場合は、置き換えるだけです

mainDiv.addEventListener('onchange',showLength,false);

と

mainDiv.addEventListener('keyup',showLength,false);

これ以上何もありません！

Update2

あなたの最後のコメントへの応答：いいえ、そのコードは機能しません。このalert(e);行はアラートを送信しようとするため、IEevent objectにない場合は、「[オブジェクトオブジェクト]」のみが表示されます。undefined

私のjsfiddleのコードが何をするのかを理解しやすくするために、コードを分解して、ステップバイステップで説明します。

私の例では、入力フィールド（1つしかありませんが100があった可能性があります）はすべて、メインのdiv要素の子#allInputsです。したがって、最初に、その要素への参照を取得します。

var mainDiv = document.getElementById('allInputs');//Here's where we'll listen for events

次に、そのdivにイベントリスナーをアタッチします。IEでのイベントのバブリング、および他のすべてのブラウザーでのイベントキャプチャにより、この要素内でトリガーされるすべてのイベントはdivを通過します。これが私が何を意味するのかを明確にするかもしれないいくつかの図です。これは、イベント委任の重要な概念です。これを取得したら、残りは簡単です。

ここで、イベントのリッスンに戻ります。addEventListener缶に書かれていることを実行します。要素にアタッチされ、その要素内で発生/ディスパッチされたイベントをリッスンします。これらのイベントのいずれかが指定されたタイプの場合、関数を呼び出します。この関数は、コールバック、またはこの場合はイベントハンドラーと呼ばれるものです。いつものように、IEは他のすべてのブラウザのように機能するわけではないので、最初にaddEventHandlerメソッドが使用可能かどうかを確認します。

if (!(mainDiv.addEventListener))
{//if not: this is the IE way
    mainDiv.attachEvent('onfocusout',showLength);
}
else
{
    mainDiv.addEventListener('change',showLength,false);
}

どちらの場合も、最初の引数は文字列であり、リッスンするイベントタイプを示します。ほとんどの場合、イベントタイプの名前からをaddEventListener削除します。onIEは、やはり頑固であるため、onchange委任されるイベントをサポートしていません（バブルしません）。この問題を回避するには、別のイベントをリッスンします。IE自体のonfocusoutイベント（入力要素がフォーカスを失った場合は、おそらく入力に使用され、新しい値があります。これにより、値の長さを確認するのに適切なタイミングになります。イベントをキャプチャ
addEventListenerするための3番目のパラメータがあります。この場合、これは関係ありませんが、quirksmode（上記のリンク）では、次のことができます。このトピックの詳細を読んでください。そうすることをお勧めします。

function showLength(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;//ie== srcElement, good browsers: target
    if (target.tagName.toLowerCase() === 'input' && target.type === 'text')
    {
        document.getElementById(target.id + 'Span').innerHTML = target.value.length;
    }
}

次に、実際のコールバックについて説明します。他の関数と同じようにこの関数を宣言し、この場合は1つの引数を指定しますe。または、event-何と呼んでもかまいません。（複数の議論が可能ですが、それから私たちは閉鎖に入る必要があります、私はここで基本に固執しようとします）。
イベントオブジェクトは、ほとんどのブラウザで呼び出されたときにハンドラー関数に渡されます。どのブラウザーがこのオブジェクトを渡さないのでしょうか。はい、古いpal IEですが、これは簡単な修正です。関数の最初の行は次のe = e || window.event;ように記述できます。

if (e === undefined)
{
    e = window.event;
}

なんで？親愛なる友人のInternetExplorerは、イベントオブジェクトをハンドラーに渡さず、グローバルオブジェクトに保持します。このオブジェクトには、を介してアクセスできますwindow.event。

次に必要なのは、イベントがトリガーされた要素を特定することです。20個の入力フィールド、10個のラジオボタン、16個の選択要素を持つフォームがあり、のレベルでイベントを検出していると仮定しますdiv#allInputs。この要素内でイベントが発生したことだけがわかります。幸い、イベントオブジェクトには、必要な要素への参照を保持するプロパティがあります。

var target = e.target || e.srcElement;

繰り返しますが、IEは異なります。quirksmodeページの内容を読んだ（そして覚えている）場合：IEイベントは最初に要素レベルでトリガーされ、次にDOMで上向きにバブルしますが、すべてのW3Cブラウザーはイベントをトップレベルでディスパッチして渡します実際の要素まで。これは、本質的に同じプロパティの異なる名前を説明しています。W3Cイベントがディスパッチされてからtarget要素を探し、IEイベントが要素にディスパッチされ、ソースからバブルアップします。-私は漂流しています。

この段階で私たちは何を知っていますか？本当に、私たちが知る必要があるすべて。どのイベントが発生したかがわかります（e.typeこの場合、変更またはフォーカスアウトのいずれかが通知されます）。どの要素がフォーカスを変更/失ったか、変数内にその要素への参照があるtargetので、その値（target.value）、id（target.id）、そしてさらに重要なことに、さらに何かをしたいかどうかを確認できます：

if (target.tagName.toLowerCase() === 'input' && target.type === 'text')

すべてのテキスト入力ではなく、30以上の要素の形式を扱っている状況について話したことを覚えていますか？select要素で新しいオプションが選択された場合、selectのvalueプロパティの長さを表示したくありませんか？targetそこで、がinputタグであるかどうかを確認します。
これはまだ考えられる任意の入力要素である可能性があるため、そのタイプかどうかも確認しましょうtarget。テキスト入力の場合にのみ、長さが表示されます。

document.getElementById(target.id + 'Span').innerHTML = target.value.length;
//or, if you want:
alert(target.value.length);

イベントの直接バインドに対するこれの利点は何ですか？繰り返しますが、変更イベントを複数の要素に個別にバインドしている場合、ユーザーは気付くでしょう。追加のボーナスとして：select、テキスト入力、ラジオなどの変更イベントはすべて1つの関数で処理できます。必要なのはswitchステートメントだけです。それ以外の：

if (target.tagName.toLowerCase() === 'input' && target.type === 'text')
{
    document.getElementById(target.id + 'Span').innerHTML = target.value.length;
}

これを試して：

if (target.tagName.toLowerCase() === 'select')
{
    alert('You\'ve selected option number: ' + (target.selectedIndex + 1));
}
if (target.tagName.toLowerCase() !== 'input')
{//suppose I only want to deal with input and select elements
    return;
}
switch(target.type)
{
    case 'text':
        alert(target.value.length);//alerts length of input value
        return;//this event is done, return
    case 'radio':
        alert('The radio button is ' + (target.checked ? '' : 'un') + 'checked');
        return;
    case 'password': 
        if (target.value.length < 8)
        {
            alert('The password is too short, add '+(8 - target.value.length)+'chars');
            return;
        }
        var verifyPass = 'passIn_' + (target.id.match(/_1$/) ? '2' : '1');
        verifyPass = document.getElementById(verifyPass);
        if (verifyPass.value.length > 0 && target.value.length > 0 && verifyPass.value !== target.value)
        {
            alert('password confirmation failed');
        }
}
return;

ご覧のとおり、1つの関数で大量のイベントを処理でき、1つのイベントリスナーをバインドできます。直接バインドする場合は、大量のハンドラーをバインドする必要があります。おそらく、いくつかの関数を作成する必要があります。これは、保守が難しく、さらに悪いことに、ユーザーにとってサイトの動作が遅くなる可能性があります。

さて、私はこれで終わり、寝る準備ができました。これで少し問題が解決することを願っています。quirksmodeのページを読み、このドリブルがあまり明確でない場合は、イベント委任に関するチュートリアルをグーグルで検索してください。ただし、提供したコードの適切な説明を提供し、イベント委任がなぜであるかについての洞察を提供したことを願っています。物事を行う正しい方法、そしてなぜ-画面の後ろで-ほとんどのライブラリもこのように機能します。
理解できないコードを含めることを本当に躊躇している場合は、jQueryがイベントを直接バインドするのではなく、ほぼすべてのイベントを委任することを知っておくと便利です。

于 2012-06-22T18:02:01.907 に答える
1

追加/削除された文字を検出し、それに応じてカウンターを変更するには、リスナーが必要です。したがって、キーリスナーを使用するか、onchange

次に例を示します。 インラインアラートを使用したTwitterのようなテキストボックスの文字数

于 2012-06-22T18:03:43.823 に答える
0

jQuery を使用している場合は、これを行うプラグインがあります。私はそれを生産で使用しましたが、うまく機能します。

http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

于 2012-06-22T18:11:41.893 に答える
0

jqueryで

$('input[name='the name of the input']').bind('keyup',function(){
 $('#show').val($(this).length)
});
于 2012-06-22T18:12:25.650 に答える
0

この機能とさまざまな構成を提供するさまざまな jquery プラグインがあります
。

http://youhack.me/2010/04/22/live-character-count-with-progress-bar-using-jquery/

http://qwertypants.me/counter/

うまくいけば、それはあなたを助けるでしょう.

于 2012-06-22T18:15:37.380 に答える