Home > Article > Web Front-end > JS method to obtain the keys pressed on the keyboard and display them on the page_javascript skills

JS method to obtain the keys pressed on the keyboard and display them on the page_javascript skills

WBOYOriginal: 2016-05-16 15:33:501737browse

The example in this article describes the JS method of obtaining the keys pressed on the keyboard and displaying them on the page. Share it with everyone for your reference, the details are as follows:

Please use the keyboard to enter some characters, and these characters will be displayed in the blank space of the web page. Are you not used to the lack of text boxes or text fields? This effect is the application of the document.onkeypress object in JavaScript, which monitors every movement of the keyboard and records which keys are pressed. It’s interesting. Friends who want to study JS, let’s start with these small examples.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-web-show-key-press-codes/

The specific code is as follows:

<html>
<head>
<title>将按下的按键显示在页面上</title>
<script language="javascript">
<!--
 str = "";
 function showkey(){
  asc = event.keyCode;
  key = String.fromCharCode(asc);
  str += key;
  txt.innerHTML = str;
 }
 document.onkeypress=showkey;
-->
</script>
</head>
<body>
请使用键盘输入文字：
<div id="txt"></div>
</body>
</html>

I hope this article will be helpful to everyone in JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Click-to-book effect code implemented by jquery_jqueryNext article：Click-to-book effect code implemented by jquery_jquery

See more

JS method to obtain the keys pressed on the keyboard and display them on the page_javascript skills

Related articles