问：

我正在使用 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 中？

javascript dom html-input

答：

2351赞 bugwheels94 7/19/2012 #1

有多种方法可以直接获取输入文本框值（无需将输入元素包装在表单元素中）：

方法 1

document.getElementById('textbox_id').value获取所需盒子

例如

document.getElementById("searchTxt").value;

注意：方法 2、3、4 和 6 返回元素的集合，因此请使用 [whole_number] 获取所需的匹配项。对于第一个元素，请使用，对于第二个使用，依此类推...[0][1]

方法 2

使用，返回实时 HTMLCollectiondocument.getElementsByClassName('class_name')[whole_number].value

例如

document.getElementsByClassName("searchField")[0].value;如果这是页面中的第一个文本框。

方法 3

它还返回实时 HTMLCollection 的 Usedocument.getElementsByTagName('tag_name')[whole_number].value

例如

document.getElementsByTagName("input")[0].value;，如果这是页面中的第一个文本框。

方法 4

document.getElementsByName('name')[whole_number].value它还>返回一个实时的 NodeList

例如

document.getElementsByName("searchTxt")[0].value;如果这是页面中名称为“searchtext”的第一个文本框。

方法 5

使用强大的 CSS 选择器来选择元素document.querySelector('selector').value

例如

document.querySelector('#searchTxt').value;按 ID 选择
document.querySelector('.searchField').value;按班级选择
document.querySelector('input').value;按标签名称选择
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;按标签名称选择
document.querySelectorAll('[name="searchTxt"]')[0].value;按名称选择

支持

浏览器	方法1	方法2	方法3	方法4	方法5/6
IE6的	Y（越野车）	N	Y	Y（越野车）	N
混合动力汽车	Y（越野车）	N	Y	Y（越野车）	N
嘿	Y	N	Y	Y（越野车）	Y
十六进制	Y	Y	Y	Y（越野车）	Y
IE10的	Y	Y	Y	Y	Y
FF3.0系列	Y	Y	Y	Y	N
FF3.5/FF3.6系列	Y	Y	Y	Y	Y
FF4b1型	Y	Y	Y	Y	Y
气相色谱仪GC4/GC5	Y	Y	Y	Y	Y Y=是，N=否
Safari4/Safari5 浏览器	Y	Y	Y	Y	Y
歌剧10.10/
歌剧10.53/	Y	Y	Y	Y（越野车）	Y
歌剧10.60
歌剧 12	Y	Y	Y	Y	Y

钥匙：

IE=IE浏览器

FF=Mozilla 火狐浏览器

GC=谷歌浏览器

相关链接

0赞 Fabrício Matté 6/22/2013

据我所知，IE8 支持 QSA，它只是在选择器字符串中不支持 CSS3 选择器。

0赞 bugwheels94 6/22/2013

@FabrícioMatté我刚刚在这里检查 quirksmode.org/dom/tests/basics.html#querySelectorAll，它告诉我它没有

1赞 bugwheels94 4/26/2017

@GKislin 啊！明白了。很高兴我不知道。但是看完这篇文章后，我现在不愿意将这个编辑添加到答案中。也许有一天，我会添加警告以避免它。警告的所有原因之一就是这个。如果你觉得它真的很好，那么要么做一个带有警告的编辑，要么根据你的愿望添加另一个答案:)

1赞 bugwheels94 8/28/2021

@calyxofheld 对所有这些使用 forEach 或 for 循环。这是JS中非常基本的东西。如果没有，您是否简要地了解过 JS？那么我建议你先经历一下。继续学习

1赞 bugwheels94 11/19/2022

@GuidoG 你来的时候很可能有一些错误

7赞 Hari Das 6/11/2013 #2

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
    function trackChange(value) {
        window.open("http://www.google.com/search?output=search&q=" + value)
    }
</script>

23赞 Fredrik 6/2/2014 #3

您应该能够键入：

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 的最低限度的理解来制作、改进和编辑。

16赞 user3768564 6/24/2014 #4

您也可以按标签名称调用，如下所示：因此，您将在特定形式中拥有确定输入的特定值。form_name.input_name.value;

0赞 Grigory Kislin 4/21/2017

是的！我很惊讶这种简单性。看看简单计算器的实现 4stud.info/web-programming/samples/dhtml-calculator.html 这个javascript功能是否有任何参考，因为我之前总是使用jQuery或getElementById

44赞 maudulus 11/5/2014 #5

//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 中查看此功能。

0赞 Victoria Stuart 4/6/2017

虽然我很欣赏接受的答案的完整性，但我发现这个答案很有用：在 JS 代码中访问在 DOM 文本输入元素（文本框）中输入的值。有关详细信息，请参阅本问题其他地方的我的回答。

33赞 John Smith 6/4/2015 #6

我将创建一个变量来存储输入，如下所示：

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

然后，我将使用变量将输入值添加到字符串中。

= "Your string" + input;

0赞 JakeJ 7/16/2019

如果您希望它是一个正确的 javascript 对象，以便您可以以编程方式访问每个属性，只需执行以下操作： var input = JSON.parse（document.getElementById（“input_id”）.value）;

5赞 Grigory Kislin 4/26/2017 #7

在 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 计算器实现。

从@bugwheels94：使用此方法时，请注意此问题。

5赞 Davinder Singh 3/8/2018 #8

<input id="new" >
<button  onselect="myFunction()">it</button>
<script>
    function myFunction() {
        document.getElementById("new").value = "a";
    }
</script>

3赞 Valter Ekholm 7/4/2018 #9

可以使用 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

7赞 Dhruv Raval 12/11/2018 #10

当您有多个输入字段时，可以使用 onkeyup。假设你有四个 or 输入。然后很烦人。我们需要写四行来获取输入字段的值。document.getElementById('something').value

因此，您可以创建一个函数，在 keyup 或 keydown 事件中存储对象中的值。

例：

<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 the first name from the object
        console.log(data); // return object
    }
</script>

0赞 Ricardo Luis Zuluaga Salazar 1/17/2019 #11

简单的 JavaScript：

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

8赞 Linh 11/9/2019 #12

如果你在一个并且你想在提交后获得值，你可以像这样做：inputform

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

这种方式的好处：例如，您的页面有 2 个用于输入和信息。formsenderreceiver

如果您不用于获取值，那么form

您可以为每个字段设置两个不同的（或或...），例如和、和、 ...idtagnamesender-namereceiver-namesender-addressreceiver-address
如果为两个输入设置相同的值，则在（或 ...）之后，您需要记住 0 或 1 是或。稍后，如果在 HTML 中更改 2 的顺序，则需要再次检查此代码getElementsByNamegetElementsByTagNamesenderreceiverform

如果使用，则可以使用、、 ...formnameaddress

11赞 Kamil Kiełczewski 1/10/2020 #13

短

您可以通过以下方式读取值searchTxt.value

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

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





<!-- SHORT ugly test code -->
<button class="search" onclick="searchURL()">Search</button>

0赞 Zoe is on strike 11/29/2021

编辑很好;对反对票的评论不属于帖子。请不要在帖子解锁时回滚

0赞 Wally 9/8/2022

@Kamil - 您是否知道这个简短的方法用于获取数据，或者您是否对 DOC 有一些引用来解释这是什么 - 我刚刚在一些代码中引用了它，它让我对某处的 querySelector 的代码库感到不满。- 这是一个很棒的功能，与JS与代码交互的“正常”方式截然不同。谢谢

0赞 bugwheels94 9/19/2022

@Wally 这不是很好。这件事在这里讨论过，很少有其他答案。stackoverflow.com/questions/3434278/......为什么它不是很好：jsfiddle.net/p94ygswy/4

3赞 Rohit Tagadiya 1/20/2021 #14

function handleValueChange() {
    var y = document.getElementById('textbox_id').value;
    var x = document.getElementById('result');
    x.innerHTML = y;
}

function changeTextarea() {
  var a = document.getElementById('text-area').value;
  var b = document.getElementById('text-area-result');
  b.innerHTML = a;
}

input {
  padding: 5px;
}

p {
  white-space: pre;
}

<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>

<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>

0赞 Jason Glass 7/22/2021 #15

function searchURL() {
   window.location = 'http://www.myurl.com/search/' + searchTxt.value
}

所以基本上会用返回输入字段的值。searchTxt.valueid='searchTxt'

0赞 C2121 7/2/2022 #16

简答题

您可以使用以下代码获取使用 JavaScript 的文本输入字段的值：input_text_value = console.log(document.getElementById("searchTxt").value)

如何使用 JavaScript 获取文本输入字段的值？

How do I get the value of text input field using JavaScript?

评论