我正在使用来自 Kube CSS & JS framework 的模式(6.5.2) 里面有一个表格。当我按下回车键时，模式关闭而不提交表单。
编辑:当专注于密码或搜索输入时不会发生这种情况 - 将类型从“文本”更改为“密码”可解决此问题。
<!DOCTYPE html>
<html>
<head>
<title>Basic Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Kube CSS -->
<link rel="stylesheet" href="dist/css/kube.css">
</head>
<body>
<h1>Hello, world!</h1>
<div id='ui-modal-test' class='modal-box hide'>
<div class='modal' style='width:95%'>
<span class='close'></span>
<div class='modal-header'>Modal Form Test</div>
<div class='modal-body'>
<form id="ui-modal-form">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<button>Apply</button>
</form>
</div>
</div>
</div>
<button data-component="modal" data-target="#ui-modal-test">Open</button>
<!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dist/js/kube.js"></script>
</body>
</html>
JS:
$('#ui-modal-form').on('submit', function(event){
event.preventDefault(); // modal still closes before submitting form
var field1 = $(this).find('input[name=field1]').val().toLowerCase();
var field2 = $(this).find('input[name=field2]').val();
var field3 = $(this).find('input[name=field3]').val();
$.post('/post.php', {
field1: field1,
field2: field2,
field3: field3,
}, function(response){
var response = JSON.parse(response);
});
});
我希望当用户在任何输入上点击回车时提交表单，而不关闭模式框。
最佳答案
我不知道 Kube，但我尝试了你所说的，这是一个问题。然后我打开 dist 文件夹中的 kube.js 文件来检查模态。 我发现这个特定函数是第 2167 行的原因 -
handleEnter: function(e)
{
if (e.which === 13)
{
e.preventDefault();
this.close(false);
}
}
13 是回车键事件的代码。我猜这是 kube 中的默认设置。也许你可以覆盖它，我认为它有一些功能可以禁用事件。如果我像这样更改参数 this.close(true)，效果很好。
希望这能告诉您发生这种情况的原因。
Kube 看起来不错 :)
关于javascript - 在表单中按回车键时 Kube 模态关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46673689/