admin管理员组

文章数量:1401247

Let me start off saying that I am new to javascript.

I am trying to change a div's content to whatever letter I type in. So if I press "p" anywhere on the page, the div text will add that letter.

For example:

<html>
  <head>
    <script>
      document.getElementById("change").onkeyup = function() {myFunction()};

      function myfunction(){

      }
    </script>
  </head>
<body>
  <div id=change>p</div>
</body>
</html>

The function is where I am stuck.

I have seen a lot of examples involving typing in a textbox but none without one. If someone could guide me in the right direction, I would be very grateful.

Let me start off saying that I am new to javascript.

I am trying to change a div's content to whatever letter I type in. So if I press "p" anywhere on the page, the div text will add that letter.

For example:

<html>
  <head>
    <script>
      document.getElementById("change").onkeyup = function() {myFunction()};

      function myfunction(){

      }
    </script>
  </head>
<body>
  <div id=change>p</div>
</body>
</html>

The function is where I am stuck.

I have seen a lot of examples involving typing in a textbox but none without one. If someone could guide me in the right direction, I would be very grateful.

  • javascript
  • html
  • events
  • onkeyup
Share Improve this question asked Aug 2, 2017 at 4:48 Jaron GalloJaron Gallo 451 silver badge7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

Why does your code not work?

You can't use the keyup event on the <div> element as you have tried to do, because JavaScript will never fire it as the div is never focused. Elements have to be focused to receive keypress events, otherwise how would the user know where their keyboard was going to type to.

What can we do about that?

One element that always "has focus" is the <body> of the webpage (unless of course, you are using a different area of your web browser, such as bookmarking a site, navigating with the URL bar, etc).

So, we can detect the event on the body of the page, and then change the content of the div accordingly. We can detect the event using document.body.onkeyup = function(event), and then get change the div content using document.getElementById("change").innerHTML, which targets that div by it's ID, and then sets it's HTML value to something new.

However, JavaScript will only send back the code of the key that was pressed (it's internal representation of the key), not the character which the key represents - (this is actually useful if you are trying to detect if a key like backspace or ctrl has been pressed). We can get this value from the event using event.keyCode.

Thus, we will have to transform that into a string, which is the final piece of our code : String.fromCharCode(event.keyCode). This transforms a character code into a string.

All together, we can update the value of the div in response to a key press.

Working Example

document.body.onkeyup = function(event) {
  document.getElementById("change").innerHTML = String.fromCharCode(event.keyCode);
}
<div id="change">p</div>

Notes

  • You can use onkeypress rather that onkeyup if you want to detect the case of letters;
  • You can use += rather than = if you want to append what you have typed now to what is already in the div;
  • If you want to just use a div as a place where you can type, check out contenteditable;
  • If you want a list of keycodes that do not map to a string value, check out this list.

If you want to add the letters as you press you can add use +=. Also onkeypress is case sensitive while onkeyup will give you capital letters.

document.body.onkeypress = function(event) {
  document.getElementById("change").innerHTML += String.fromCharCode(event.keyCode);
}
<div id="change">p</div>

本文标签： htmlHow to use onkeyup in javascript to add text to a div that isn39t a textboxStack Overflow

版权声明：本文标题：html - How to use onkeyup in javascript to add text to a div that isn&#39;t a textbox? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744262706a2597795.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。