javascript 如何使用 querySelector 按名称选择输入元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15148659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use querySelector on to pick an input element by name?
提问by Anthony Tobuscus
I recently received help on this site towards using querySelectoron a form input such as selectbut as soon as I took <select>out it completely changed what had to be done in the function.
我最近在这个网站上收到了关于querySelector在表单输入上使用的帮助，select但是一旦我<select>取出它就完全改变了必须在函数中完成的操作。
HTML:
HTML：
<form onsubmit="return checkForm()">
Password: <input type="text" name="pwd">
<input type="submit" value="Submit">
</form>
Javascript:
Javascript：
<script language="Javascript" type="text/javascript">
debugger;
function checkForm() {
var form = document.forms[0];
var selectElement = form.querySelector('');
var selectedValue = selectElement.value;
alert(selectedValue);
</script>
Before, I had ('select')for the querySelector, but now I'm unsure what to put there.
I've tried multiple things as well as querySelectorAllbut I can't seem to figure it out.
以前，我有('select')for querySelector，但现在我不确定该放什么。
我也尝试了很多东西，querySelectorAll但我似乎无法弄清楚。
To be clear I'm trying to pull the name="pwd".
明确地说，我正在尝试将name="pwd".
How could I do this?
我怎么能这样做？
回答by AlexCheuk
You can try 'input[name="pwd"]':
你可以试试'input[name="pwd"]'：
function checkForm(){
var form = document.forms[0];
var selectElement = form.querySelector('input[name="pwd"]');
var selectedValue = selectElement.value;
}
take a look a this http://jsfiddle.net/2ZL4G/1/
回答by Ciprian Tepes
I know this is old, but I recently faced the same issue and I managed to pick the element by accessing only the attribute like this: document.querySelector('[name="your-selector-name-here"]');
我知道这是旧的，但我最近遇到了同样的问题，我设法通过只访问这样的属性来选择元素： document.querySelector('[name="your-selector-name-here"]');
Just in case anyone would ever need this :)
以防万一有人需要这个:)
回答by TROUZINE Abderrezaq
1- you need to close the block of the function with '}', which is missing.
1- 您需要使用缺少的“}”关闭函数块。
2- the argument of querySelector may not be an empty string '' or ' '... Use '*' for all.
2- querySelector 的参数不能是空字符串 '' 或 ' '... 全部使用 '*'。
3- those arguments will return the needed value:
3- 这些参数将返回所需的值：
querySelector('*')
querySelector('input')
querySelector('input[name="pwd"]')
querySelector('[name="pwd"]')
回答by Piyu
querySelector()matched the id in document. You must write id of password in .html
querySelector()匹配文档中的 id。你必须写密码的id.html
Then pass it to querySelector()with #symbol & .value property.
然后将其传递给querySelector()with #symbol & .value property。
Example:
例子：
let myVal = document.querySelector('#pwd').value
let myVal = document.querySelector('#pwd').value
回答by agm1984
These examples seem a bit inefficient. Try this if you want to act upon the value:
这些例子似乎有点低效。如果你想对值采取行动，试试这个：
<input id="cta" type="email" placeholder="Enter Email...">
<button onclick="return joinMailingList()">Join</button>
<script>
const joinMailingList = () => {
const email = document.querySelector('#cta').value
console.log(email)
}
</script>
You will encounter issue if you use thiskeyword with fat arrow (=>). If you need to do that, go old school:
如果您使用this带有粗箭头 ( =>) 的关键字，则会遇到问题。如果你需要这样做，去老派：
<script>
function joinMailingList() {
const email = document.querySelector('#cta').value
console.log(email)
}
</script>
If you are working with password inputs, you should use type="password"so it will display ****** while the user is typing, and it is also more semantic.
如果您正在使用密码输入，则应该使用type="password"它，以便在用户键入时显示 ******，并且它也更具语义。
回答by Cleyton Brasil
So ... you need to change some things in your code
所以......你需要在你的代码中改变一些东西
<form method="POST" id="form-pass">
Password: <input type="text" name="pwd" id="input-pwd">
<input type="submit" value="Submit">
</form>
<script>
var form = document.querySelector('#form-pass');
var pwd = document.querySelector('#input-pwd');
pwd.focus();
form.onsubmit = checkForm;
function checkForm() {
alert(pwd.value);
}
</script>
Try this way.
试试这个方法。
