2017-02-01 9 views
2

私はドキュメントを見てきましたが、このメソッドに関する情報を見つけるのに問題があります。テキスト入力やテキストエリアでテキストを追加または変更するイベントを処理すると思います。しかし、それを動作させることはできません。誰かが私にこのイベントハンドラをさらに説明できることを願っています。誰かがjqueryの.select()メソッドについて説明できますか?

<input id="first" type="text">// if something is typed here an event should be triggered 
     //at least if my understanding is correct which it clearly isnt 
<input id="second" type="text">//hello should appear here when the event is triggered 

<script> 
     $("#first").select(function(){$("#second").val("hello")})//this does nothing 
</script> 
+4

*を* ['これは.select() 'に関する公式情報](https://api.jquery.com/select/)** –

+3

構文エラーがあります。あなたのコンソールを見てください(ページを右クリックし、要素の点検をクリックしてください)。ページをリロードすると、エラーが表示されます。 –

+2

それ以外の場合は正常に動作するはずです。このイベントは、テキストを入力するときではなく、テキストボックス内のテキストを選択するとトリガされます。また、javascriptコードの "second"の前にハッシュ記号を付ける必要があります。これは、次のようなものでなければなりません: '$("#first ")select(function(){$("#second ")} val(" hello ");});' –

答えて

1

$.select()テキストやtextarea要素の内のテキストを選択したときに動作します。マウスでテキストを「強調表示」するときの意味。以下のことを試してみてください。

$("#first").select(function() { 
 
    $("#second").val("hello"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>First:</div> 
 
<input id="first" type="text" value="select this text"> 
 
<div>Second:</div> 
 
<input id="second" type="text">

あなたが追加にフックしたい場合は、代わりにjQueryのon inputのようなものを使用することができます。

$("#first").on('input', function() { 
 
    $("#second").val("hello"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>First:</div> 
 
<input id="first" type="text"> 
 
<div>Second:</div> 
 
<input id="second" type="text">

1

あなたはselectメソッドを誤解しています。入力要素のテキストが選択されている場合に使用されます。あなたのコメントは、何かが入力されたときにコードがトリガーされることを示しています。

要素で入力が受信されたときに関数をトリガーする場合は、inputイベントを使用する必要があります。あなたは正しく、その要素にアクセスしていなかったので

また、あなたの関数は、second参照の前に#が含まれていませんでした。 official documentation of jquery for .select()に基づいて

$("#first").on("input", function(){ 
 
    $("#second").val("hello") 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="first" type="text"> 
 
<input id="second" type="text">

2

、ここではそれが何のために定義し、実証する例を示します。

公式説明

バインドJavaScriptのイベントを「選択」、または要素に そのイベントをトリガーするイベントハンドラ。

つまり、selectテキストがソース要素にあるときに対象要素の操作を実行しようとしています。それが何をしているのかについてのコメントを見てください。

//always good to wrap events inside document.ready 
 
$(function() { 
 
    $("#first").select(function() { 
 
    //once you perform select operation on input#first element either by Ctrl+a 
 
    //or by Mouse drag event 
 
    $("#second").val("hello"); 
 
    //value of input#second element should be updated to hello 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="first" type="text"> 
 
<input id="second" type="text">

1
<body> 
<input id="first" type="text"> 
<input id="second" type="text"> 
<script> 
$("#first").change(function() { 
    $("#second").val("hello") 
}) 
</script> 
</body> 
関連する問題