使用`event.key`和现代JS！

Question

我想检测用户是否使用jQuery按 Enter 。

这怎么可能？它需要插件吗？

编辑：看起来我需要使用keypress()方法。

我想知道是否有人知道该命令是否存在浏览器问题 - 比如是否存在我应该了解的任何浏览器兼容性问题？

Answer 1

jQuery的重点在于您不必担心浏览器差异。我很确定你可以安全地使用输入在所有浏览器中都是13。所以考虑到这一点，你可以这样做：

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Answer 2

我写了一个小插件，以便更容易绑定“按下输入键”事件：

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

用法：

$("#input").enterKey(function () {
    alert('Enter!');
})

Answer 3

我无法获得@Paolo Bergantino发布的代码，但当我将其更改为$(document)和e.which而不是e.keyCode时，我发现它可以完美无缺地工作。< / p>

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Link to example on JS Bin

Answer 4

我发现这更兼容跨浏览器：

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

Answer 5

您可以使用jquery'keydown'事件句柄

来完成此操作

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

Answer 6

我花了一些时间来提出这个解决方案，我希望它可以帮助某人。

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

Answer 7

有一个keypress()事件方法。 Enter键的ascii编号为13，不依赖于正在使用的浏览器。

Answer 8

使用`event.key`和现代JS！

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

或没有jQuery：

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla Docs

Supported Browsers

Answer 9

上面安德里亚的答案的一个小扩展使得辅助方法更有用，当你可能还想捕获修改后的输入按下时（即ctrl-enter或shift-enter）。例如，此变体允许绑定，如：

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

在用户按下ctrl-enter时提交表单，并将焦点放在该表单的textarea上。

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

（另见Ctrl+Enter jQuery in TEXTAREA）

Answer 10

在某些情况下，您可能需要禁止页面某个区域的 ENTER 键，而不是页面的其他区域，例如下面包含标题<的页面/ strong> <div>，带有 SEARCH 字段。

我花了一些时间来弄清楚如何做到这一点，我在这里为社区发布这个简单而完整的例子。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Script</title> <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $('.container .content input').keypress(function (event) { if (event.keyCode == 10 || event.keyCode == 13) { alert('Form Submission needs to occur using the Submit button.'); event.preventDefault(); } }); </script> </head> <body> <div class="container"> <div class="header"> <div class="FileSearch">  </div> </div> <div class="content"> <form id="testInput" action="#" method="post"> <input type="text" name="text1" /> <input type="text" name="text2" /> <input type="text" name="text3" /> <input type="submit" name="Submit" value="Submit" /> </form> </div> </div> </body> </html>

Link to JSFiddle Playground：[Submit]按钮不执行任何操作，但从其中一个文本框控件中按 ENTER 将不会提交表单。

Answer 11

尝试此操作以检测按下的Enter键。

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

参见demo @ detect enter key press on keyboard

Answer 12

const OpenedAppointments = ({slideWidth}) => {
  const [currentIndex, setCurrentIndex] = React.useState(null);

  const [cardHeight, setCardHeight] = useState(140);

  const collapseCard = (cardIndex) => {
    setCurrentIndex(cardIndex);
    currentIndex === cardIndex
      ? (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
        Animated.spring(),
        setCardHeight(200))
      : (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
        Animated.spring(),
        setCardHeight(140));
  };

  const renderItems = (item, index) => {
    return (
      <TouchableOpacity
        delayPressIn={0}
        onPress={() => collapseCard(index)}
        key={item.id}>
        <Animated.View
          style={[
            styles.itemContainer,
            {
              height: cardHeight,
            },
          ]}>
          <View style={styles.headerContainer}>
            <View style={styles.imgContainer}>
              <Image
                resizeMode="cover"
                style={styles.img}
                source={{uri: item.vendorInfo.vendorImg}}
              />
            </View>
            <View style={{width: '80%'}}>
              <View style={styles.titleContainer}>
                <Text numberOfLines={1} style={styles.vendorName}>
                  {item.vendorInfo.name}
                </Text>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={styles.rateText}>{item.vendorInfo.rate}</Text>
                  <AntDesign name="star" size={18} color="#262626" />
                </View>
              </View>
              <View style={styles.socialContainer}>
                <View
                  style={{
                    width: 32,
                    height: 32,
                    backgroundColor: '#000',
                    borderRadius: 5,
                  }}
                />
              </View>
            </View>
          </View>
          <View style={styles.footer}>
            <Text style={styles.serviceName}>
             
                {item.serviceName}
            </Text>
            <Text style={styles.price}>
              {item.price}
            </Text>
          </View>

// this will appeared when pressed to card "Footer Card"
          <View>
            <View style={styles.line} />
            <View style={styles.editFooter}>
              <View style={styles.dateContainer}>
                <MemoCalender
                  style={styles.calenderIcon}
                  size={26}
                  color="#000"
                />
                <View style={styles.dateBox}>
                  <Text style={styles.dateText}>{item.date}</Text>
                  <Text style={styles.dateText}>{item.time}</Text>
                </View>
              </View>
             
            </View>
          </View>
        </Animated.View>
      </TouchableOpacity>
    );
  };


return(
<>
        {Data.opened.map((item, index) => renderItems(item, index))}
</>
);
}

Answer 13

由于keypress事件未包含在任何正式规范中，因此使用它时遇到的实际行为可能会因浏览器，浏览器版本和平台而异。

Array::ArrayLength -> bool

我希望它会有用！

Answer 14

我使用了$(document).on("keydown")。

在某些浏览器上，不支持keyCode。与which相同，因此如果不支持keyCode，则需要使用which，反之亦然。

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 15

使用keypress方法来检测使用jQuery在键盘上按下Enter吗？

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

        $('#someTextBox').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert('You pressed a "enter" key in textbox'); 
            }
            event.stopPropagation();
        });

<html>
<head>
<title>jQuery keypress() Method To Detect Enter key press or not Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>Write something here & press enter</h1>
    <label>TextBox Area: </label>
    <input id="someTextBox" type="text" size="100" />
 
</body>
</html>

Answer 16

这是我如何解决你应该给return false;

 
 $(document).on('keypress',function(e) {
            if(e.which == 13) {
                $('#sub_btn').trigger('click');
                alert('You pressed a "enter" key in somewhere'); 
                return false;     
            }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="sub_email_form">
                    <div class="modal-header">
                        <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Subscribe to our Technical Analysis</h4>
                    </div>
                    <div class="modal-body">
                        <p>Signup for our regular Technical Analysis updates to review recommendations delivered directly in your inbox.</p>
                        <div class="input-group">
                            <input type="email" name="sub_email" id="sub_email" class="form-control" placeholder="Enter your email" required>
                        </div>
                        <span id="save-error"></span>
                    </div>
                    <div class="modal-footer">
                        <div class="input-group-append">
                            <input type="submit" class="btn btn-primary sub_btn" id="sub_btn" name="sub_btn" value="Subscribe">
                        </div>
                    </div>
                </form>

`

Answer 17

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

Answer 18

$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

Answer 19

我认为最简单的方法是使用vanilla javacript：

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

Answer 20

检测用户是否按下输入的简便方法是使用密钥编号输入密钥编号= 13来检查设备中密钥的值

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

按回车键，结果为13。使用键值可以调用函数或执行任何操作

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

如果您想在按下回车键时按下按钮，则可以使用代码

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

希望有所帮助

如何使用jQuery检测按键盘输入？

20 个答案:

使用`event.key`和现代JS！

如何使用jQuery检测按键盘输入？

20 个答案:

使用event.key和现代JS！

使用`event.key`和现代JS！