0

ユーザー入力をある HTMLinputから別の HTML にコピーしようとすると、コンソールにエラーが表示されます。Uncaught TypeError: Object #<HTMLInputElement> has no method 'val'

問題が何であるかわからない..テキスト入力には値があると思いましたか? ご協力いただきありがとうございます！

HTML:

<input id="a" class="answer" type="text">
<input id="af" type="text" name="a">


$('.answer').bind('keypress', function(){
    var name  = $(this).attr('id'),
        feild = $('#' + name + 'f')[0];

    feild.val($(this).val());
});
4

2 に答える 2

3

編集： @zerkmsが指摘したように、[0]はとにかく必要ありませんが、セレクターで配列インデックスを使用すると便利な場合があるため、エラーを理解できるようにここに残しておきます。

変化する：

field.val($(this).val());

に

$(field).val($(this).val());

説明：$('#' + name + 'f')セレクターに一致するHTML要素の配列を取得します。これを配置[0]すると、配列の最初のHTML要素が取得されます。fieldはjQueryオブジェクトではなくHTML要素であるため、jQueryメソッドを使用してjQueryオブジェクトに変換する必要があります$(field)。

于 2012-05-23T01:49:26.190 に答える
1

最初に、ここでソリューションを実際に完成させるには、いくつかの追加ポイントを追加する必要があります。

  • onkeypress イベントは、文字キーを押して離した場合 (または保留を繰り返した場合) にのみ発生する必要があります。

  • onkeydown/onkeyup イベントは、押された/離されたキーに対して発生する必要があります。

参照

したがって、削除アクション、イベントの貼り付けなどを含める必要があるため、実際にはキーアップ時に入力テキストをコピーする必要があります.

第二に、この方法は機能しますが、実際のサイトで見たような機敏さはありません。それが得られるかどうかを確認したかったので、ここに進みます。

Onkeyup/down イベントには文字情報が含まれていない (または含まれるべきではない) ため、プロセスを高速化するためにそれらを実際に使用することはできません。

私はしばらくそれをいじっていましたが、私が思いついたものは、依存関係を追加しますが、応答時間が大幅に高速です- jcaret。

大きなバグはないと思いますが、YMMV. また、キープレス イベントに対するブラウザのサポートはばかばかしいほど不完全ですが、できればjQuery がそれを処理してくれることを願っています (これは Chrome でのみテストしました)。

$('.answer').bind('keyup', function(e){
    $('#' + $(this).attr('id') + 'f').val($(this).val());
});

$('.answer').keypress(function(e){
    var newChar = String.fromCharCode(event.which);
    var oldVal = $(this).val();
    var cursorPos = $(this).caret().start;

    var newVal = oldVal.slice(0, cursorPos) + newChar + oldVal.slice(cursorPos);

    $('#' + $(this).attr('id') + 'f').val(newVal);
});

jsfiddle

お役に立てれば！</p>

于 2012-05-23T04:41:37.337 に答える