按回车键提交HTML表单标签
html form tag submit on enter key
我有<form>标签反应'输入键'的问题。
<html>
<head>
<title>Poring</title>
<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1 text/html; charset=utf-8">
<script src="./js/jquery.ajax-cross-origin.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("div.input-group > :text").keypress(function(data){
if(data.which == 13) {
if ($("div.tags").children().length == 5) {
alert("maximum 5.");
$("div.input-group > :text").val('');
return;
}
if ( $("div.input-group > :text").val() != "") {
$("div.tags").append('<input name="favorites" class="btn-custom2 btn-floatleft" type="button" value="' + $("div.input-group > :text").val() + '">');
$("div.input-group > :text").val('');
}
}
});
$("div.tags").on('click', ':button', function() {
$(this).remove();
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.col-md-4 > img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(":file").change(function(){
readURL(this);
});
});
</script>
</head>
<body style="background-color:#3591cd;">
<div class="login-wrapper">
<a href="login.html" class="center-poring"><img src="img/poring.png"></a>
<div class="signup-container shadow" style="margin-bottom:30px;">
<form class="form-login " action="login.html" onkeydown="return stopKeyPress(event)">
<h2 class="form-login-heading">sign up</h2>
<div class="login-wrap row">
<div class="col-md-4">
<img alt="profile picture css" class="pic-circle-corner img-profile" src="img/img-profile-empty.png" />
<div class="file_input_div">
<button class="btn-custom1 img-profile file_input_img_btn">profile</button>
<input type="file"class=" file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value"></input>
</div>
</div>
<div class="col-md-8">
<input type="email" class="form-control" placeholder="email" autofocus>
<br>
<input type="text" class="form-control" placeholder="name">
<br>
<input id="password1" type="password" class="form-control" placeholder="password">
<br>
<input id="password2" type="password" class="form-control" placeholder="password check">
</div>
<div class="login-wrap" style="margin:10px;" >
<p style="color:#000000;">favorites (maximum-5)</p>
<div class="input-group">
<div class="input-group-addon"><img src="img/ic-tag.png"></div>
<input type="text" class="form-control" placeholder="enter the tag">
</div>
<div class="tags">
</div>
</div>
<div id="login-link">
<input type="submit" value="sign up" class="btn btn-theme btn-block btn-signup signup-button">
</div>
</div>
</form>
</div>
</div>
<script>
function stopKeyPress(data) {
if(data.which == 13) {
return false;
}
}
function formValidation() {
alert('hello');
if ($("#password1").val() != $("#password2").val() ||
($("#password1").val().length == 0 || $("#password2").val().length == 0))
return false;
else
return true;
}
</script>
</body>
</html>
从这里所有的<input>属于一个<form>标签。如果我使用"enter key"，则提交表单。因此，我使用stopKeyPress()函数停止它。
现在，当我使用'enter key'时，表单没有提交。这就是我想做的。
但是，从<input type="text" class="form-control" placeholder="enter the tag">，当我在这个<input type="text">中输入一些文本时，我想使用'enter key'来创建新的<input type="button">，其值是<input type="text">的值。(这是在<head>的javascript代码)。
但是，因为我在这个<form>标签中停止对'enter key'作出反应，所以这也不会对'enter key'作出反应。
是否存在<input type="text">对'enter key'有反应，而submit不允许'enter key'的解决方案?怎样才能做到呢?
为要执行操作的输入标签添加id。
<input type="text" id="addNewBtn">
不是在表单上调用stopKeyPress()，而是在输入的按键上调用它。并排除你想要在keydown/keypress
上工作的输入。e
$(document).ready(function(){
$('#formid').on('keydown','input',function(e){
if($(this).attr('id') != 'addNewBtn'){
stopKeyPress(e);
}
});
});
你应该像这样给你的输入添加一个id
<input type="text" id="t1">
的想法是添加一个事件监听器或简单地从javascript调用一个函数。
javascript函数