web-dev-qa-db-ja.com

JavaScriptを使用してテキスト入力フィールドの値を取得する方法

私はJavaScriptを使った検索に取り組んでいます。私はフォームを使用しますが、それは私のページ上で何か他のものをめちゃくちゃにします。この入力テキストフィールドがあります。

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

これが私のJavaScriptコードです。

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

テキストフィールドからJavaScriptに値を取得する方法

javascriptdominput
729
user979331

入力テキストボックスの値を直接（フォーム要素の内側に入力要素をラップせずに）取得する方法はいくつかあります。

方法1：

目的のボックスの値を取得するためのdocument.getElementById('textbox_id').value

例えば、 document.getElementById("searchTxt").value;です。

注： 方法2、3、4、および6は要素のコレクションを返すため、目的の値を取得するには[whole_number]を使用します。最初の要素には[0]を使用し、2番目の要素には 1 を使用します。

方法2：

Live HTMLCollectionを返す document.getElementsByClassName('class_name')[whole_number].valueを使用してください。

たとえば、これがページの最初のテキストボックスの場合は document.getElementsByClassName("searchField")[0].value;です。

方法3：

ライブのHTMLCollectionも返すdocument.getElementsByTagName('tag_name')[whole_number].valueを使用してください。

たとえば、これがページの最初のテキストボックスの場合は document.getElementsByTagName("input")[0].value;です。

方法4：

ライブのNodeListも返すdocument.getElementsByName('name')[whole_number].value

たとえば、これがあなたのページの中で 'searchtext'という名前の最初のテキストボックスである場合は document.getElementsByName("searchTxt")[0].value;です。

方法5：

CSSセレクターを使用して要素を選択する強力なdocument.querySelector('selector').valueを使用してください。

例えば、 document.querySelector('#searchTxt').value;はidによって選択されます 
document.querySelector('.searchField').value;クラスによる選択 
document.querySelector('input').value;がtagnameによって選択されました 
document.querySelector('[name="searchTxt"]').value;が名前で選択されました

方法6：

document.querySelectorAll('selector')[whole_number].valueはCSSセレクターを使って要素を選択しますが、静的セレクターとしてそのセレクターを持つすべての要素を返します。

例えば、 document.querySelectorAll('#searchTxt')[0].value;はidによって選択されます 
document.querySelectorAll('.searchField')[0].value;クラスによる選択 
document.querySelectorAll('input')[0].value;がtagnameによって選択されました 
document.querySelectorAll('[name="searchTxt"]')[0].value;が名前で選択されました

サポート

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

便利なリンク

  1. より多くの詳細を含むすべてのバグでこれらのメソッドのサポートを見るにはここをクリック
  2. 静的コレクションとライブコレクションの違いはここをクリック
  3. NodeListとHTMLCollectionの違いはここをクリック
1514
bugwheels94
//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

codepenでこの機能を参照してください。

20
maudulus

また、次のようにタグ名で呼び出すこともできます。form_name.input_name.value;したがって、特定のフォームで決定された入力の特定の値を取得できます。

14
user3768564

このように入力を格納するための変数を作成します。

var input = document.getElementById("input_id").value;

そして、変数を使って文字列に入力値を追加します。

= "Your string" + input;

13
Vadim Tatarnikov

次のように入力できるはずです。

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

もっと良い方法があると私は確信していますが、これはすべてのブラウザで動作するように思われます、そしてそれは作成、改良、そして編集するためにJavaScriptの最低限の理解を必要とします。

7
Fredrik A.

これを試してください

<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>
3
Hari Das

ChromeとFirefoxでテスト済み

要素IDで値を取得します。

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

フォーム要素に値を設定します。

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

また、JavaScriptの計算機の実装を見てください： http://www.4stud.info/web-programming/samples/dhtml-calculator.html

@ bugwheels94からの更新：このメソッドを使用するときは、 この問題に注意してください 。

2
GKislin

Form.elementsを使用してフォーム内のすべての要素を取得できます。要素にidがある場合、それは.namedItem（ "id"）で見つけることができます。例：

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

出典： w3schools

1
Valter Ekholm

単純なjs

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}
0
Ricardo Luis Zuluaga Salazar
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
0
Davinder Singh

もっと入力フィールドがあるときはonkeyupを使うことができます。あなたが4つまたはinput.then document.getElementById('something').valueが迷惑であるとします。入力フィールドの値を取得するために4行書く必要があります。

そのため、キーアップイベントまたはキーダウンイベントでオブジェクトに値を格納する関数を作成できます。

例：

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javaScript：

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>
0
Dhruv Raval