Question

我对<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>标记。如果我使用＆＃39;输入密钥＆＃39;，则会提交表单。所以，我使用stopKeyPress()函数停止它。

现在，当我使用＆＃39;输入密钥＆＃39;时，表单未提交。这就是我想要做的。

但是，从<input type="text" class="form-control" placeholder="enter the tag">开始，当我在此<input type="text">中输入一些文字时，我想使用＆＃39;输入密钥＆＃39;制作价值为<input type="button">的新<input type="text">。{它在<head>的javascript代码中。

但是，因为我停下来回答＆＃39;输入密钥＆＃39;在此<form>标记中，这也不会对输入密钥做出反应。

是否存在<input type="text">对输入密钥＆＃39;做出反应的任何解决方案，而提交不允许输入密钥＆＃39;？怎么办呢？

Answer 1

您应该像这样

为您的输入添加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

Answer 2

将id添加到要执行操作的输入标记。

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

而是在窗体上调用stopKeyPress（），在输入的按键上调用它。并排除你想在keydown / keypress上工作的输入

即

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

html表单标记提交输入密钥

2 个答案: