在回车键上提交的html表单标签
[英]html form tag submit on enter key
问题描述
我对<form>标记有问题，该标记对“输入密钥”有反应。
我的html代码如下：
<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>标记。 如果我使用“输入密钥”，则提交表单。 因此，我使用stopKeyPress()函数将其停止。
现在，当我使用“输入密钥”时，表单未提交。 这就是我想做的。
但是，从<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">对“输入密钥”做出反应，而不允许提交“输入密钥”吗？ 如何做呢？
2 个解决方案
解决方案1
0 2016-11-17 10:08:36
您应该像这样在输入中添加一个ID
<input type="text" id="t1">
这个想法是添加一个事件侦听器或简单地从javascript调用一个函数。
JavaScript函数
html
<input type="text" id="t1" onKeyPress="myFunction(e,val)">
Java脚本
<script>
function myFunction(e,input) {
console.log("Do your stuff");
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
alert('enter press');
}
</script>
在var代码中，我放置了三元运算符。
e is event var in javascript
如果要访问输入类型，可以将jquery与$("#t1")
解决方案2
0 2016-11-17 10:22:49
将ID添加到要在其上执行操作的输入标签。
<input type="text" id="addNewBtn">
而不是在表单上调用stopKeyPress（），而在输入的按键上调用它。 并排除您要在按键/按键操作上使用的输入
即
$(document).ready(function(){
$('#formid').on('keydown','input',function(e){
if($(this).attr('id') != 'addNewBtn'){
stopKeyPress(e);
}
});
});
在HTML表单上提交Enter键
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.