JavaScript技巧：取得文字輸入欄位的值

Question

我正在使用JavaScript進行搜尋。我想使用一個表單，但它會破壞我的頁面上的其他東西。我有這個輸入文字欄位：

<input name="searchTxt" type="text" maxlength="512" id="searchTxsearcht" class&iel; />

這是我的JavaScript程式碼：

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

如何將文字欄位的值傳遞給JavaScript？

Answer 1

//创建一个监听器，当你按下一个键时触发
window.onkeyup = keyup;

//创建一个全局的Javascript变量
var inputTextValue;

function keyup(e) {
  //将你的输入文本设置为全局的Javascript变量，每次按键都会更新
  inputTextValue = e.target.value;

  //监听你按下回车键，此时你的网址将会改变为你在搜索框中输入的网址
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

在codepen中查看此功能。

Answer 2

有多種方法可以直接取得輸入文字方塊的值（而無需將輸入元素包裝在表單元素內）：

方法1

document.getElementById('textbox_id').value 取得所需框的值

例如

document.getElementById("searchTxt").value;

#  注意：方法2、3、4和6傳回一個元素集合，因此使用[整數]來取得所需的元素。對於第一個元素，使用[0]，對於第二個元素，使用[1]，依此類推...

方法2

使用document.getElementsByClassName('class_name')[整數].value，它傳回一個即時的HTMLCollection

#例如

document.getElementsByClassName("searchField")[0].value;，如果這是頁面上的第一個文字方塊。

方法3

使用document.getElementsByTagName('tag_name')[整數].value，它也傳回一個即時的HTMLCollection

#例如

document.getElementsByTagName("input")[0].value;

，如果這是頁面上的第一個文字方塊。

方法4

document.getElementsByName('name')[整數].value

，它也傳回一個即時的NodeList

例如

document.getElementsByName("searchTxt")[0].value;

，如果這是頁面上的第一個名稱為'searchtext'的文字方塊。

方法5

使用強大的document.querySelector('selector').value

，它使用CSS選擇器來選擇元素

例如

• document.querySelector('#searchTxt').value;
透過id選擇
• document.querySelector('.searchField').value;
透過class選擇
• document.querySelector('input').value;
透過標籤名稱選擇
• document.querySelector('[name="searchTxt"]').value;
透過名稱選擇

方法6

document.querySelectorAll('selector')[整數].value

，它也使用CSS選擇器來選擇元素，但它將所有具有該選擇器的元素作為靜態NodeList傳回。

例如

• document.querySelectorAll('#searchTxt')[0].value;
透過id選擇
• document.querySelectorAll('.searchField')[0].value;
透過class選擇
• document.querySelectorAll('input')[0].value;
透過標籤名稱選擇
• document.querySelectorAll('[name="searchTxt"]')[0].value;
透過名稱選擇

支持###

FF4b1YYYYY GC=Google ChromeGC4/GC5YYYYY Y=YES,N=NO#Safari4/Safari5YYYYYOpera10.10/Opera10.53/YYYY（有問題）YOpera10.60Opera 12YYYYY

瀏覽器	方法1	方法2	方法3	方法4	方法5/6
IE6	Y（有問題）	N	Y	Y（有問題）	N
IE7	Y（有問題）	N	Y	Y（有問題）	N
IE8	Y	N	Y	Y（有問題）	Y
IE9	Y	Y	Y	Y（有問題）	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

###