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

方法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;按名称选择

支持

有用的链接

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

<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>

你应该能够输入:

var input = document.getElementById（“searchTxt”）; 函数搜索URL（） { window.location = “http://www.myurl.com/search/” + input.value; } <input name=“searchTxt” type=“text” maxlength=“512” id=“searchTxt” class=“searchField”/>

我相信有更好的方法可以做到这一点，但这一方法似乎可以跨所有浏览器工作，并且它只需要对JavaScript有最少的了解就可以进行制作、改进和编辑。

你也可以，通过标签名称调用，像这样: 所以你会得到特定形式的特定输入值。

//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;
  }
}

请在代码依赖中查看此功能。

我将创建一个变量来存储输入，就像这样:

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

然后我用变量把输入值加到字符串中。

=“你的字符串”+输入;

在Chrome和Firefox中测试:

通过元素id获取值:

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

在form元素中设置值:

<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:在使用此方法时，请注意此问题。

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

我们可以使用这种形式。元素来获取表单中的所有元素。如果一个元素有id，它可以用. nameditem ("id")找到。例子:

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

来源:w3schools

当你有多个输入字段时，你可以使用onkeyup。假设你有四个输入。然后 . getelementbyid(“什么”)。价值是恼人的。我们需要写四行来获取输入字段的值。

因此，你可以创建一个函数，在keyup或keydown事件时将值存储在object中。

例子:

<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>

简单的JavaScript:

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

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

<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，…

短

你可以通过searchTxt.value读取值

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> < script type = " text / javascript " > 函数searchURL () { console.log (searchTxt.value); / /窗口。location = "http://www.myurl.com/search/" + searchTxt.value; ｝ > < /脚本 <！——短小丑陋的测试代码——> <button class="search" onclick="searchURL()“>搜索> < /按钮

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>

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

基本上就是searchTxt。value将返回id='searchTxt'的输入字段值。

简短的回答

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

更多信息

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

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