Zac*_*oss 0 forms web-applications google-sheets google-apps-script
大多数附加组件都很好，但是每当我按 Enter 键时（在我看来，这是提交表单的最常见方式，例如登录表单），但它所做的只是空白。
我试过onkeydown像这样链接脚本：
<div onkeydown="handle(event)">blagh blagh blagh</div>
但我仍然得到相同的结果：
<html>
<form id='myForm' style="font-family:Georgia;">
<table>
<tr><td><h2>Enter your Password</h2></td></tr>
<tr><td><p>DO NOT HIT ENTER ON YOUR KEYBOARD!!!!!</p></td></tr>
<tr><td><input name='password' type='password' value="" onkeypress="handle(event)"></td></tr>
<tr><td><div id="submitbuttcontainer"><img id="submitloader" style="display:none;" src='https://lh6.googleusercontent.com/-S87nMBe6KWE/TuB9dR48F0I/AAAAAAAAByQ/0Z96LirzDqg/s27/load.gif' /><input id="submitbutt" type='button' onclick='showWorking();google.script.run.withSuccessHandler(onSuccess).decodeForRequest(document.getElementById("myForm"));' name="Submit" value="Submit"></div></td></tr>
</table>
</form>
<script>
function onSuccess(obj) {
document.getElementById('submitbutt').style.display="block";
document.getElementById('submitloader').style.display="none";
if(obj.status == 'success') {
google.script.host.closeDialog();
browser.msgbox('Access Granted', browser.buttons.OK)
}
else {
browser.msgbox('ALERT!!','!OOF!','Incorrect Password. Please retry', browser.buttons.OK);
}
}
function showWorking() {
document.getElementById('submitbutt').style.display="none";
document.getElementById('submitloader').style.display="block";
}
function handle(e){
if(e.keyCode === 13)
document.getElementById('submitbuttcontainer').click();
}
</script>
</html>
我要做的就是在我按回车键而不是空白时让表单提交。我总是按回车键提交表单，但在这种情况下，它所做的只是将表单空白，而我所拥有的只是白色。
这是完整源代码的链接（不知道这是否可行，因为我在学区）：
问题
点击enter键会导致表单提交（由于其客户端到服务器的通信实现，在 Apps 脚本中被明确禁止）。
解决方案 1 - 单独处理输入
如果键是，则添加preventDefault()到keydown事件enter（顺便说一句，keypress不推荐使用事件，请参阅MDN 上的参考，使用keydown/keyup代替）：
var ENTER_CODE = 13;
function handle(e) {
if(e.keyCode === ENTER_CODE) {
e.preventDefault();
document.getElementById('submitbuttcontainer').click();
}
}
解决方案 2 - 处理表单提交
如果您希望表单在击键时提交，您可以submit改为监听表单上的事件并preventDefault()作为事件处理程序中的唯一语句调用或同时处理表单提交enter：
//assumption: form is initiated elsewhere in code;
form.addEventListener('submit', (event) => {
event.preventDefault();
//handle submission;
});
您还可以阻止提交所有表单以使设置灵活：
var ENTER_CODE = 13;
function handle(e) {
if(e.keyCode === ENTER_CODE) {
e.preventDefault();
document.getElementById('submitbuttcontainer').click();
}
}
或者，或者，使用事件委托并注册一个监听器，document因为事件冒泡了：
//assumption: form is initiated elsewhere in code;
form.addEventListener('submit', (event) => {
event.preventDefault();
//handle submission;
});
建议
请使用addEventListener代替on[event name here]属性。这种方式更加灵活，并且具有简洁易懂的优点。
参考
| 归档时间： |
|
| 查看次数： |
156 次 |
| 最近记录： |