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

JavaScript

乐米亚

2020-03-10

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

第463篇《如何使用JavaScript获取文本输入字段的值?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
泡芙西门 2020.03.10

如果您使用的是jQuery,然后使用插件formInteract,则只需执行以下操作:

// Just keep the HTML as it is.

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

在页面底部,仅包含此插件文件并编写以下代码:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

或者,如果使用参数化的URL,请使用以下命令:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

这是项目链接https://bitbucket.org/ranjeet1985/forminteract

您可以将此插件用于许多目的,例如获取表单的值,将值放入表单,表单的验证等等。您可以在项目的index.html文件中看到一些代码示例。

Of course I am the author of this project and all are welcome to make it better.

神乐神乐 2020.03.10
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
A小卤蛋Pro 2020.03.10

您可以通过读取值

searchTxt.value

function searchURL() {
   console.log( searchTxt.value )
   //...
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
<button onclick="searchURL()">search</button>

神奇Tony古一 2020.03.10

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

YOC38880545 2020.03.10
//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中的此功能。

Davaid阳光小卤蛋 2020.03.10

同样,您也可以按标签名称进行调用,如下所示:form_name.input_name.value; 这样,您将以特定的形式获得确定的输入的特定值。

逆天Eva 2020.03.10

您应该可以输入:

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的理解,编写,改进和编辑都需要极少的了解。

理查德十三Davaid 2020.03.10

试试这个

<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>
Jim樱 2020.03.10

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

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

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

= "Your string" + input;

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android