提交按钮并输入关键问题

时间:2011-11-15 19:03:32

标签: javascript html

如果用户专注于任何提交按钮或输入类型文本(如在过滤数据网格中),我正在尝试阻止表单提交。

我正在考虑2个选项

  • 使用某种<p onclick='submitform&parameters'>Add</p>
  • 替换提交按钮
  • 阻止按钮上的回车键和一些首选输入字段

有更好的方法吗?

2 个答案:

答案 0 :(得分:2)

如果您向相关元素添加onKeyPress事件,则可以通过从函数返回false来阻止默认操作(表单提交):

<input id="txt" type="text" onKeyPress="var key = event.keyCode || event.which; if (key == 13) return false;"></input>

请注意,不推荐使用键盘事件的which属性,但您仍需要检查它是否支持较旧的用户代理和/或Internet Exploder(reference)。

如果您不想使用内联javascript(不推荐),您可以改为附加活动。此外,最好使用事件对象的preventDefaultdocs)方法,以及stopPropagation方法(docs) - 这些方法的必要性这在很大程度上取决于您附加到表单或元素的其他事件:

var preventFormSubmit = function (event) {
    var key = event.keyCode || event.which;
    if (key != 13)
        return;
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true; // deprecated, for older IE
    if (event.preventDefault) event.preventDefault();
    else event.returnValue = false; // deprecated, for older IE
    return false;
};  
var target = document.getElementById('txt');
if (typeof target.addEventListener == 'function')
    target.addEventListener('keypress', preventFormSubmit, false);
else if (typeof target.attachEvent == 'function')
    target.attachEvent('onkeypress', preventFormSubmit);

还有其他方法可供使用,例如将更复杂的onSumit处理程序附加到表单本身 - 如果您在提交之前要对表单或数据进行进一步操作,这可能更合适(或使用AJAX提交表单数据。)

答案 1 :(得分:0)

解决方案

input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

链接

http://stackoverflow.com/questions/1567644/submit-form-problem-enter-key

问题已结束