如何在按下回车键时获取输入框的值

Question

如何在按下回车键时获取输入框的值

4

当用户按下回车键时，我正在尝试从输入框中获取值。我不需要任何按钮。如何实现？

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>

- bc110402307 Syed Zeeshan Haide

您希望在用户在页面上任何位置按下回车键时发生，还是输入值后再按回车键时发生？ - Loufylouf

你可以使用 onChange() 事件，但这取决于你想对该值做什么。我会选择常规的 表单提交。 - RST

如果在表单中设置了提交按钮（可以通过样式隐藏），那么在输入框上按下回车键将触发对该提交按钮的合成点击，然后根据表单操作属性，在服务器端获取您的值。 - A. Wolff

7个回答

3

<script>
 $(document).on('keyup','#quan',function(){
 var code = e.keyCode || e.which;
  if(code == 13) { //Enter keycode
   //Do something
  }
 });
</script>

- Rakib Roni

3

像这样

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

    });

- sharma sk

3

function getVal(ele) {
    if(event.keyCode == 13) {
        alert(ele.value);        
    }
}

<input type="text" onkeydown="getVal(this)"/>

- Niklesh Raut

OP正在使用jQuery，为什么你建议他使用一种不好的做法，即使用内联事件处理程序。 - Rajaprabhu Aravindasamy

如果我想将这个值存储在一个变量中以供PHP使用，该怎么办？ - bc110402307 Syed Zeeshan Haide

如果您想发布此值，只需命名它并在另一个.php文件中获取此值，该文件将在操作标记中提到。如果不是这样，请解释一下。 - Niklesh Raut

2

试试这个：

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

- Ridvan Shaikh

如果我想将这个值存储在一个变量中以供PHP使用，该怎么办？ - bc110402307 Syed Zeeshan Haide

2

你可以像这样做：

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

当你在键盘上输入回车键的代码为13时，你可以在控制台中看到该值。

- Vivek Singh

如果我想将这个值存储在变量中以供 PHP 使用，该怎么办？ - bc110402307 Syed Zeeshan Haide

请查看此链接：https://www.sitepoint.com/community/t/pass-jquery-value-to-php-variable/10687 - Vivek Singh

1

$(document).ready(function(){
     $('#quan').keyup(function (event) {
          if (event.which === 13) {
                var model = $(this).val();
                console.log(model);
          }
     });
});

- Dmitriy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nana Partykar · Accepted Answer

使用 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（创建一个新页面。确保您的页面名称与<script></script>中给出的页面名称匹配。两者相关。）

<?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");
      }
}});