如何使用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?

当前回答

有多种方法可以直接获取输入文本框的值(不需要将输入元素包装在表单元素中):

方法1

. getelementbyid(“textbox_id”)。值来获取的值需要盒子

例如

document.getElementById（“searchTxt”）.value;

注意:方法2、3、4和6返回元素的集合，因此使用[whole_number]来获得所需的出现。对于第一个元素，使用[0]，对于第二个，使用[1]，以此类推……

方法2

使用 document.getElementsByClassName (class_name) [whole_number]。返回一个Live HTMLCollection的值

例如

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

方法3

使用document.getElementsByTagName (tag_name) [whole_number]。值，它也返回一个实时的HTMLCollection

例如

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

方法4

document.getElementsByName(“名字”)[whole_number]。>返回一个活的节点列表

例如

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

方法5

使用功能强大的document.querySelector('selector')。值，它使用CSS选择器选择元素

例如

document.querySelector value(“# searchTxt”);按id选择 document.querySelector value(“.searchField”);按班级选择 document.querySelector value(“输入”);由tagname选择 document.querySelector ([name = " searchTxt "]) value;按名称选择

方法6

document.querySelectorAll(“选择器”)[whole_number]。值，它也使用CSS选择器来选择元素，但它以静态节点列表的形式返回该选择器的所有元素。

例如

document.querySelectorAll (# searchTxt) [0] value;按id选择 document.querySelectorAll(“.searchField”)[0]。value;按班级选择 document.querySelectorAll(“输入”)[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

有用的链接

要查看这些方法对所有错误的支持，包括更多详细信息，请单击这里静态集合和动态集合的区别点击这里 NodeList和HTMLCollection的区别点击这里

2012-07-19 15:02:14

其他回答

简单的JavaScript:

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

2019-01-17 13:14:59

如果你的输入是一个表单，你想在提交后得到值，你可以这样做:

<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个表单用于输入发送方和接收方信息。

如果你不使用形式来获取价值

你可以为每个字段设置两个不同的id(或标签或名称…)，比如sender-name和receiver-name, sender-address和receiver-address，… 如果为两个输入设置相同的值，那么在getElementsByName(或getElementsByTagName…)之后，您需要记住0或1是发送方或接收方。稍后，如果您更改HTML中2表单的顺序，则需要再次检查此代码

如果你用form，那么你可以用name, address，…

2019-11-09 08:24:26

简短的回答

你可以使用下面的代码使用JavaScript获取文本输入字段的值:

更多信息

textObject有一个value属性，你可以设置和获取这个属性。

要设置，您可以指定一个新值: . getelementbyid(“searchTxt”)。Value = "新值"

2022-07-02 13:16:29