触发器按钮在HTML中单击Enter
触发器按钮在HTML中单击Enter
提问于 2018-08-02 02:40:32
我已经通过Stack，W3和其他公司研究过这个问题，但我所提出的解决方案都不起作用。下面是我的html代码的一部分，我尽了最大的努力保持它的整洁(无论如何都不是专家)。
<select name="ctl00$ContentPlaceHolder1$ddlSearchCriteria" id="ctl00_ContentPlaceHolder1_ddlSearchCriteria" style="width:150px;">
<option value="LastName">Last Name</option>
<option value="FirstName">First Name</option>
<option value="Phone">Phone Number</option>
<option value="Department">Department</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="Title">Title</option>
<option value="Email">Email Address</option>
<option value="Keywords">Keywords</option>
</select>
<div style="height:10px"></div>
<input name="ctl00$ContentPlaceHolder1$txtSearchString" type="text" id="ctl00_ContentPlaceHolder1_txtSearchString" style="width:160px;">
<button type="button" name="ctl00$ContentPlaceHolder1$Button1" id="ctl00_ContentPlaceHolder1_Button1" style="position: absolute; height:22px; " onclick="myFunction()">Go</button>
<div style="height:5px;"></div>
</td>
<td style="width:48%; height: 27px;"> </td>
</tr>
</tbody>
</table>
</div>
<script>
var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
function myFunction()
{
var dropDownChoice = document.getElementById("ctl00_ContentPlaceHolder1_ddlSearchCriteria").value;
var inputText = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString").value;
var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
window.open(GoToURL);
}
</script> 我正在尝试这样做，这样当您单击enter时，submit按钮就会激活。我已经尝试过https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp和Trigger function on Enter keypress作为例子。
但这不起作用，它只会破坏我的代码。不知道我是不是放错地方了。我在函数中的var inputText下面添加了它。
回答 2
Stack Overflow用户
发布于 2018-08-02 02:49:09
您需要在输入文本字段中添加keyup事件侦听器
将此代码添加到javascript中
var input = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("ctl00_ContentPlaceHolder1_Button1").click();
}
});Stack Overflow用户
发布于 2018-08-02 04:52:48
用type="submit"替换type="button"
添加<form onsubmit="myFunction">
用<form>包装你的<select>
<form onsubmit="myFunction">
<select>...</select>
</form>下面是你的函数应该做什么来阻止表单提交(我们没有包含一个"action“，所以它会提交给自己)
function myFunction(event){
// Stop the form from submitting (default functionality)
event.preventDefault();
...
}您的代码应该类似于此(添加了一个修复，用于以正确的方式获取选择列表值)
<form onsubmit="myFunction">
<select id="mySelect">
<option value="LastName">Last Name</option>
<option value="FirstName">First Name</option>
<option value="Phone">Phone Number</option>
<option value="Department">Department</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="Title">Title</option>
<option value="Email">Email Address</option>
<option value="Keywords">Keywords</option>
</select>
<input type="text" id="myInput">
</form>
<script type="text/javascript">
function myFunction(event){
// Prevent the form from submitting (default functionality)
event.preventDefault();
var myUrl = "http://bccportal01/webapps/agency/epdsearch/Search.aspx?",
selectEl = document.getElementById('mySelect'),
inputEl = document.getElementById('myInput');
// Append the selected value
myUrl += "op=" + selectEl.options[selectEl.selectedIndex].value;
myUrl += "&str=" + inputEl.value;
window.open(myURL);
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51640227
复制相关文章
相似问题
腾讯云开发者
