1280

我正在用JavaScript进行搜索。我会使用表单，但它会把页面上的其他内容弄乱。我有这个输入文本字段：

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

这是我的JavaScript代码：

<script type=“text/javascript”>函数searchURL（）{window.location=“http://www.myurl.com/search/“+（输入文本值）；}</script>

如何将文本字段中的值转换为JavaScript？

改进这个问题
0

16个答案16

重置为默认值
2419

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

方法1

document.getElementById（'textbox_id'）.value获取的值所需的框

例如

document.getElementById（“searchTxt”）.value；

 注：方法2、3、4和6返回一个元素集合，因此使用[whole_number]获得所需的出现次数。对于第一个元素，使用[0],第二次使用[1]等等。。。

方法2

使用document.getElementsByClassName（'class_name'）[whole_number].value返回Live HTMLCollection

例如

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

方法3

使用document.getElementsByTagName（'tag_name'）[whole_number].value它还返回实时HTMLCollection

例如

document.getElementsByTagName（“输入”）[0].value；，如果这是页面中的第一个文本框。

方法4

document.getElementsByName（'名称'）[whole_number].value它还>返回活动NodeList

例如

document.getElementsByName（“searchTxt”）[0].value；如果这是页面中第一个名为searchtext的文本框。

方法5

使用强大的document.querySelector（'selector'）.value它使用CSS选择器选择元素

例如

  • 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（'[名称=“searchTxt”]'）[0].value；按名称选择

支持

浏览器 方法1 方法2 方法3 方法4 方法5/6
IE6标准 Y（车） N个 Y（Y） Y（车） N个
IE7标准 Y（车） N个 Y（Y） Y（车） N个
IE8标准 Y（Y） N个 Y（Y） Y（车） Y（Y）
第9页 Y（Y） Y（Y） Y（Y） Y（车） Y（Y）
IE10标准 Y（Y） Y（Y） Y（Y） Y（Y） Y（Y）
法国法郎3.0 Y（Y） Y（Y） Y（Y） Y（Y） N个
FF3.5/FF3.6 Y（Y） Y（Y） Y（Y） Y（Y） Y（Y）
FF4b1型 Y（Y） Y（Y） Y（Y） Y（Y） Y（Y）
一般条款4/一般条款5 Y（Y） Y（Y） Y（Y） Y（Y） Y Y=是，N=否
萨法利4/萨法利5 Y（Y） Y（Y） Y（Y） Y（Y） Y（Y）
操作10.10/
操作10.53/ Y（Y） Y（Y） Y（Y） Y（车） Y（Y）
操作10.60
歌剧12 Y（Y） Y（Y） Y（Y） Y（Y） Y（Y）

密钥：

工业工程=Internet Explorer

FF公司=Mozilla Firefox

GC公司=谷歌浏览器

有用的链接

  1. 要查看这些方法对所有错误的支持，包括更多详细信息，请单击此处
  2. 静态收藏与实时收藏的区别单击此处
  3. NodeList和HTMLCollection之间的差异单击此处
改进此答案
16
  • IE8标准支持QSA就我所见，它只是不支持选择器字符串中的CSS3选择器。
    – 法比西奥·马特
    评论 2013年6月22日4:02
  • @Fabrício Mattéi刚刚检查过这里quirksmode.org/dom/tests/basics.html#querySelectorAll它告诉我它没有
    – 车轮94
    评论 2013年6月22日4:10
  • 1
    @GKislin啊！我懂了。很高兴我不知道。但是看完之后这，我现在不太愿意将此编辑添加到答案中。也许有一天，我会加上一个警告来避免它这。如果你觉得这真的很好，那么要么编辑一个带有警告的内容，要么根据你的意愿添加另一个答案：）
    – 车轮94
    评论 2017年4月26日14:05
  • 1
    @花萼被挡住了，随便用对于每个或者对所有这些进行循环。这是JS中非常基本的东西。如果没有，你有没有简要地学习过JS？那么我建议你先检查一下。继续学习
    – 车轮94
    评论 2021年8月28日7:36
  • 1
    @GuidoG你来的时候很可能有漏洞
    – 错误车轮94
    评论 2022年11月19日10:48
45
//当您按键时创建侦听器window.onkeyup=按键；//创建全局Javascript变量变量inputTextValue；功能键（e）{//为每次按键设置输入文本为全局Javascript变量inputTextValue=e.target.value；//监听您按ENTER键，此时您的网址将更改为您在搜索框中输入的网址if（e.keyCode==13）{window.location=“http://www.myurl.com/search/“+inputTextValue；}}

请参阅代码笔中的此功能。

改进此答案
1
  • 虽然我很欣赏接受的答案的完整性，但我发现这个答案很有用：在JS代码中重新访问在DOM文本输入元素（文本框）中输入的值。有关详细信息，请参阅本问题其他部分的我的答案。
    – 维多利亚·斯图亚特
    评论 2017年4月5日23:51
35

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

var输入=document.getElementById（“input_id”）.value；

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

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

改进此答案
1
  • 如果您希望它是一个合适的javascript对象，以便可以通过编程访问每个属性，只需执行以下操作：var input=JSON.parse（document.getElementById（“input_id”）.value）；
    – JakeJ公司
    评论 2019年7月16日13:33
24

您应该能够键入：

var输入=document.getElementById（“searchTxt”）；函数searchURL（）{window.location=“http://www.myurl.com/search/“+输入值；}
<input name=“searchTxt”type=“text”maxlength=“512”id=“searchTxt”class=“searchField”/>

我相信有更好的方法可以做到这一点，但这一方法似乎适用于所有浏览器，而且它只需要对JavaScript有最低限度的了解就可以制作、改进和编辑。

改进此答案
20

您还可以按标记调用名称，如下所示：表单名称输入名称值；因此，您将获得特定形式的已确定输入的特定值。

改进此答案
1
12

短

您可以通过读取值搜索Txt.value

<input name=“searchTxt”type=“text”maxlength=“512”id=“searchTxt”class=“searchField”/><script type=“text/javascript”>函数searchURL（）{console.log（searchTxt.value）；//window.location=“http://www.myurl.com/search/“+搜索Txt.value；}</script><!-- 短而难看的测试代码-->搜索

改进此答案
三
  • 编辑很好；对否决票的评论不属于帖子。当邮件解锁时，请不要回滚
    – Zoe-保存数据转储 ♦
    评论 2021年11月28日16:46
  • @Kamil-你知道这个简短的方法是用来获取数据的吗，或者你有没有引用一个DOC来解释这是什么这是一个很棒的特性，与JS与代码交互的“正常”方式大不相同。谢谢
    – 沃利
    评论 2022年9月8日15:36
  • @沃利这不太好。这件事在评论中讨论过，这里几乎没有其他答案。stackoverflow.com/questions/3434278/…为什么不好：jsfiddle.net/p94ygswy/4
    – 车轮94
    评论 2022年9月19日14:41
9

如果您的输入处于形式您希望在提交后获得值，可以这样做：

<form onsubmit=“submitLoginForm（event）”><input type=“text”name=“name”><input type=“password”name=“passward”><input type=“submit”value=“Login”></form><script type=“text/javascript”>函数子界面LoginForm（事件）{event.proventDefault（）；console.log（event.target['name'].value）；console.log（event.target['password'].value）；}</script>

这种方式的优点：页面示例2 形式用于输入发件人和接受者信息。

如果你不用形式然后获取值

  • 你可以设置两个不同的身份证件（或标签或名称…）对于每个字段，如发件人姓名和收货人姓名,发件人地址和收件人地址, ...
  • 如果为两个输入设置相同的值，则在按名称获取元素（或按标记名获取元素…）您需要记住0或1是发件人或接受者。稍后，如果您更改2的顺序形式在HTML中，您需要再次检查此代码

如果你使用形式，然后您可以使用名称,地址, ...

改进此答案
8
<input type=“text”onkeyup=“trackChange（this.value）”id=“myInput”><脚本>功能轨迹更改（值）{窗口。打开（“http://www.google.com/search？output=search&q=“+值）}</script>
改进此答案
8

你可以使用接通钥匙当您有多个输入字段时。假设你有四个或输入。然后document.getElementById（'something'）.value很烦人。我们需要写四行来获取输入字段的值。

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

例子：

<div class=“container”><div>名称<input type=“text”name=“fname”id=“fname“onkeyup=handleInput（this）></div><div><label for=“”>年龄<input type=“number”name=“age”id=“age”onkeyup=handleInput（this）></div><div>电子邮件<input type=“text”name=“email”id=“email”onkeyup=handleInput（this）></div><div><label for=“”>手机<input type=“number”name=“mobile”id=“number“onkeyup=handleInput（this）></div><div>提交</div></div>

JavaScript语言：

<脚本>常量数据={}；功能句柄输入（e）{数据[e.name]=e.value；}函数submitData（）{console.log（data.fname）；//从对象中获取名字console.log（数据）；//回波信号}</script>
改进此答案
6

在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
<input id=“new”><button onselect=“myFunction（）”>it</button><脚本>函数myFunction（）{document.getElementById（“new”）.value=“a”；}</script>
改进此答案
三

可以使用form.elements获取表单中的所有元素。如果元素具有id，则可以使用.namedItem（“id”）找到它。例子：

var myForm=文档.getElementById（“表单1”）；var text=myForm.elements.namedItem（“searchTxt”）.value；var url=“http://www.myurl.com/search/“+文本；

资料来源：w3学校

改进此答案
三

函数handleValueChange（）{var y=文档.getElementById（'textbox_id'）.value；var x=document.getElementById（“结果”）；x.innerHTML=y；}函数changeTextarea（）{var a=document.getElementById（'text-area'）.value；var b=文档.getElementById（'text-area-result'）；b.innerHTML=a；}
输入{填充：5px；}对{空白：前置；}
<input type=“text”id=“textbox_id”placeholder=“在此处输入字符串…”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
函数searchURL（）{window.location='http://www.myurl.com/search/'+搜索Txt.value}

所以基本上搜索Txt.value将使用返回输入字段的值id='searchTxt'.

改进此答案
0

简短回答

您可以使用JavaScript通过以下代码获取文本输入字段的值：input_text_value=控制台.log（document.getElementById（“searchTxt”）.value）

更多信息

text对象具有的属性价值您可以设置并获取此属性。

要设置，可以指定新值：document.getElementById（“searchTxt”）.value=“新值”

改进此答案
0

简单JavaScript：

函数copytext（text）{var textField=document.createElement（'textarea'）；textField.innerText=文本；document.body.appendChild（textField）；textField.select（）；document.execCommand（“复制”）；textField.remove（）；}
改进此答案

不是你想要的答案吗？浏览标记的其他问题或问你自己的问题.