JavaScript/jQueryを使用して入力テキストボックスの値を取得する
この投稿では、JavaScriptとjQueryで入力テキストボックスの値を取得する方法について説明します。
1.JavaScriptで入力テキストボックスの値を取得する
を使用して、入力テキスト ボックスの値を取得または設定できます。 value
財産。 The value
プロパティは、入力テキスト ボックスの現在の値を表します。 JavaScript を使用して入力テキスト ボックスの値を取得する完全なコードは次のようになります。
JS
1 2 3 4 |
document.getElementById('submit').onclick = function() { var value = document.getElementById('name').value; alert(value); } |
HTML
1 2 3 4 5 |
<div id="container"> <label for="name">Name:</label> <input type="text" id="name"> </div> <button id="submit">Get Value</button> |
2. jQueryで入力テキストボックスの値を取得する
を使用して、入力テキスト ボックスの値を取得または設定できます。 val()
方法。 The val()
メソッドは要素の値を取得または設定します。の val()
このメソッドは引数を取ることができません。その場合、セット内の最初の要素の現在の値が返されます。あるいは、値を引数として受け取ることもでき、その場合、セット内の各要素の値をその値に設定します。 jQuery を使用して入力テキスト ボックスの値を取得する完全なコードは次のようになります。
JS
1 2 3 4 5 6 |
$(document).ready(function() { $('#submit').click(function() { var value = $('#name').val(); alert(value); }) }); |
HTML
1 2 3 4 5 |
<div id="container"> <label for="name">Name:</label> <input type="text" id="name"> </div> <button id="submit">Get Value</button> |
注意、使用しないでください .attr()
テキストボックスの値を次のように取得するメソッド .attr('value')
ページの読み込み中にDOMからテキストボックスの値を返しますが、現在の値が変更されたときのテキストボックスのリアルタイム値は返しません。
JavaScriptとjQueryで入力テキストボックスの値を取得することはこれですべてです。
こちらも参照: