文章/答案/技术大牛

发布

社区首页 >问答首页 >按enter键时提交html表单标记

问按enter键时提交html表单标记
EN

Stack Overflow用户

提问于 2016-11-17 17:57:45

回答 2查看 2K关注 0票数 0

我对'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>标记。如果我使用“enter key”，表单就会被提交。因此，我使用stopKeyPress()函数来停止它。

现在，当我使用“enter key”时，表单没有被提交。这就是我想做的。

但是，在<input type="text" class="form-control" placeholder="enter the tag">中，当我在这个<input type="text">中输入一些文本时，我想使用‘Enter键’来生成新的<input type="button">，它的值是<input type="text">的值。(它在<head>的javascript代码上)。

但是，因为我停下来在这个<form>标记中使用“enter key”进行反应，所以它也不会对“enter key”做出反应。

<input type="text">对“enter key”有什么反应，而submit不允许“enter key”吗？怎么做呢？

javascript

jquery

html

forms

回答 2

Stack Overflow用户

发布于 2016-11-17 18:08:36

您应该将id添加到输入中，如下所示

<input type="text" id="t1">

其想法是添加一个事件侦听器或简单地调用javascript中的函数。

javascript中的函数

html

<input type="text" id="t1" onKeyPress="myFunction(e,val)">

Javascript

<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")一起使用

尝试此链接event.preventDefault() vs. return false

票数 0

Stack Overflow用户

发布于 2016-11-17 18:22:49

将id添加到要对其执行操作的input标记。

<input type="text" id="addNewBtn">

而不是在表单上调用stopKeyPress()，而是在输入的按键时调用它。并排除要处理keydown/keypress的输入

i.e

$(document).ready(function(){
  $('#formid').on('keydown','input',function(e){
     if($(this).attr('id') != 'addNewBtn'){
          stopKeyPress(e);
       }
    });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40651744

复制

相似问题

问按enter键时提交html表单标记
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按enter键时提交html表单标记EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按enter键时提交html表单标记
EN