我有一个设置为MSDOS终端样式的聊天机器人。用户键入他们的响应,然后按Enter。我发现当我用“ display:none;”标记按钮时 它会导致页面在多个浏览器上重新加载(我的Windows chrome浏览器无法重新加载。不知道为什么)。如何隐藏按钮,但表单和代码仍能正常运行?我宁愿不使用“ position:absolute;” 将其发送到屏幕之外。
HTML:
<div id="bot"><form> <input id="user-response" type="text" placeholder="" autocomplete="off" autofocus /> <button id="user-submit" type="submit">Send</button> </form></div>
JAVASCRIPT:
$('#bot').on('click', '#user-submit', function(e) { e.preventDefault(); message = $('#user-response').val(); message = message.toLowerCase(); sendUserResponse(); getBotResponse(message); });
我已经尝试了各种类型的return:false;、event.preventDefault();等等,但是只要我不应用display,一切都可以正常工作:none;样式的按钮。我也将其更改为输入,然后键入=“ button” / type =“ submit”,但再次显示:none; 导致在单击“ enter”时重新加载页面。我已经在页面重载onclick查询ajax等页面上阅读了大约20个不同的问题…它们似乎都没有解决这个问题。
编辑:
使用了以下两个建议来检查是否按了“Enter”键来提交表单,但是它们继续出现相同的失败模式。如果您的提交按钮为样式显示,则窗体将重新加载页面。可见显示按钮时,以下方法有效。将检查代码以查找可能导致提交和重新加载的返回值。当前:具有可见按钮的页面-适用于任何方法。显示页面:无按钮-导致在所有给定方法下重新加载。
也要提及的是,页面重新加载在Windows7的Chrome49.0.2623.87中不存在,但在所有OSX浏览器和某些Windows浏览器中均存在。
编辑2
错误:显示:无;按钮会导致页面重新加载。在OSX浏览器和某些Windows上显而易见。解决方案:切换到完整的Ajax非格式,应该解决所有问题。放在一起时将发布有效的Ajax解决方案。下面的正确答案是建议Ajax。错误已提交给Chrome开发人员,以后可能还会提交给其他浏览器。
我认为您正在寻找AJAX。AJAX使您可以将表单数据发送到后端PHP文件(该文件随后可以将数据插入DB中和/或从DB中获取数据)而无需重新加载页面。
该页面正在重新加载,因为您正在使用<form>。当按下提交按钮时,它将提交表格,该表格总是刷新页面。但是,如果您使用AJAX,则可以发送数据(可选地接收响应)并正常进行。
<form>
实际上,当您使用AJAX时,您甚至不需要使用<form>结构-简单的DIV就可以了。然后,您无需使用event.preventDefault()来抑制内置表单刷新。
event.preventDefault()
另外,将“提交”按钮的类型从更改type="submit"为type="button"
type="submit"
type="button"
若要检测用户何时在输入字段中按Enter,然后单击“提交”按钮,请尝试以下操作:
$(function(){ $('#user-response').keyup(function(){ var keycode = (e.keyCode ? e.keyCode : e.which); if(keycode == '27'){ $('form').fadeOut();} if(keycode == '13'){ $('#user_submit').click(); } }); });