【问题标题】:How can i get input field value on hitting enter如何在按 Enter 时获取输入字段值
【发布时间】:2016-03-19 18:43:39
【问题描述】:

当用户按 Enter 时,我试图从输入框中获取值。 我不需要任何按钮。 我怎样才能做到这一点

test.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>

<form action="#" method="GET" enctype="multipart/form-data">
    <center>
            <input name="quan" align="middle" type="text" id="quan" placeholder="quan" title="If You Want Change Quantity Then Type Here"  size="4">
    </center>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        var model=$('#quan').val();
        console.log(model);
    });                                     
</script>
</body>
</html>

【问题讨论】:

  • 如果用户在页面上的任意位置按回车键,或者输入一个值然后按回车键,您希望这种情况发生吗?
  • 您可以使用onChange() 事件,但这取决于您要对该值做什么。我会去一个普通的form submit
  • 如果您在表单中设置了提交按钮(可以通过样式隐藏),然后在输入时按 Enter 将触发对该 dubmit 按钮的合成单击,然后您将根据表单操作属性获得价值服务器端

标签: javascript php jquery


【解决方案1】:

使用keyup()keydown() 函数。附加到它,使用event.keyCode == 13 获取点击enter 按钮后的值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<form action="#" method="GET" enctype="multipart/form-data">
    <center>
            <input name="quan" align="middle" type="text" id="quan" placeholder="quan" title="If You Want Change Quantity Then Type Here"  size="4">
    </center>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
      $('#quan').keydown(function(event) {
          if (event.keyCode == 13) {
              var model=$('#quan').val();
              alert(model);
              // Use this 'model' variable
          }
      });
 });
</script>
</body>
</html>

用户要求

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
      $('#quan').keydown(function(event) {
          if (event.keyCode == 13) {
              var model=$('#quan').val();
              $.ajax({url:"nextPage.php?model="+model,cache:false,success:function(result){
                    alert("success");
              }});
          }
      });
 });
</script>

nextPage.php(创建一个新页面。确保您的页面名称与&lt;script&gt;&lt;/script&gt; 中给出的页面名称匹配。两者都是相关的。)

<?php
$model = $_GET['model'];

//Now, use this '$model' wherever you want to use in this page. 

?>

成功 & 错误

$.ajax({url:"nextPage.php?model="+model,cache:false,success:function(result){
      if(result.status == 'success'){
                alert("success");
      } else if(result.status == 'error') {
                alert("Error");
      }
}});

【讨论】:

  • Party kar 如何在 php 中使用 javascript 变量?
  • 您想将此model 值传递给另一个页面或@bc110402307SyedZeeshanHaide?​​span>
  • 是的,亲爱的,如果我想将此值传递给另一个页面或在同一页面上用于 sqli 查询怎么办?
  • 使用 Ajax 将此model 发送到下一页。等待几分钟。我将为您提供将其发送到下一页的代码@bc110402307SyedZeeshanHaide
  • 感谢 NANA bhai :P 上帝保佑你
【解决方案2】:

function getVal(ele) {
    if(event.keyCode == 13) {
        alert(ele.value);        
    }
}
&lt;input type="text" onkeydown="getVal(this)"/&gt;

【讨论】:

  • OP 正在使用 jquery,以及为什么您建议他使用使用内联事件处理程序的不良做法。
  • @Niklesh 如果我想将此值存储在一个变量中以供 php 使用怎么办?
  • 如果您想发布此值,只需为其命名并在另一个 .php 文件中获取此值,您将在操作标签中提及该文件。如果不是这样,你能解释一下吗?
【解决方案3】:
<script>
 $(document).on('keyup','#quan',function(){
 var code = e.keyCode || e.which;
  if(code == 13) { //Enter keycode
   //Do something
  }
 });
</script>

【讨论】:

    【解决方案4】:

    喜欢这个

    $(document).ready(function(){
         $('#quan').keyup(function (e){
                var model=$(this).val();
                if(e.keyCode == 13){
                    alert(model)
                  }
              })
    
        });
    

    【讨论】:

      【解决方案5】:

      试试这个:

      <script type="text/javascript">
      $( "input" ).keypress(function( event ) {
        if ( event.which == 13 ) {
            alert($(this).val());
        }
      });
      </script>
      

      【讨论】:

      • @Rivdan Shaikh 如果我想将此值存储在一个变量中以供 php 使用怎么办?
      【解决方案6】:

      你可以这样做

      <script type="text/javascript">
      $( "input" ).keypress(function( event ) {
        if ( event.which == 13 ) {
            consol.log($(this).val());
        }
      });
      </script>
      

      其中 13 是输入键码,当您在键盘中输入时,您可以在控制台中看到该值

      【讨论】:

      【解决方案7】:
      $(document).ready(function(){
           $('#quan').keyup(function (event) {
                if (event.which === 13) {
                      var model = $(this).val();
                      console.log(model);
                }
           });
      });
      

      【讨论】:

        猜你喜欢
        • 2019-12-09
        • 1970-01-01
        • 2012-07-07
        • 1970-01-01
        • 1970-01-01
        • 2020-05-21
        • 2020-11-29
        • 2014-12-04
        • 1970-01-01
        相关资源
        最近更新 更多