How to Make div span and other elements respond to Keyboard Events operation guide

Source: Internet
Author: User

I encountered a problem in my work over the past few days. google found a solution in English, which is easy to understand.
The translation is as follows::
I have an editable div and an editable span in the DIV. I want to make the span respond to Keyboard Events,
Here is the JS Code for testing: Copy codeThe Code is as follows: $ (function ()
{
$ ('# Someid'). keypress (function (event) {alert ('test ');});
});

Here is the test html code:Copy codeThe Code is as follows: <div id = "mydiv" contenteditable = "true">
Editable follows: <span id = "someid" contenteditable = "true"> Some TEXT </span>
</Div>

If you test in a browser, you will see that when you press the key on Some TEXT, the 'test' pop-up box does not appear, I know the cause of this problem is that the event is sent from the div of the parent node of span, so span does not trigger the event. Of course, it is also because span has no focus, so I want someone to help me find a solution.
Finally, I was able to help solve this problem.
Solution code for your problem I have submitted to the http://jsfiddle.net/gaby/TwgkC/3/ and work fine
Test in FF, Opera, Chrome, Safari, IE8...
# Someid needs to get the focus to trigger keypress. If you want your code to get the focus, use the. focus () method immediately after the element is created.Copy codeThe Code is as follows: function AppendSpan ()
{
$ ('# Mydiv'). append ('<span id = "someid" contenteditable = "true"> Some TExt </span> ');
// Then I want to handle the keypress event on the inserted span
$ ('# Someid'). keypress (function (event ){
// Do something here
Alert (this. id );
}). Focus (); // bring focus to the element once you append it ..
}

Append:
Two methods are used to trigger the event (in fact, the contenteditable attribute must be used). you are not sure whether you can accept this situation.
1. Wrap one editable span on the outer layer of the other and set its attribute contenteditable = "false"
Demo js:Copy codeThe Code is as follows: function AppendSpan ()
{
$ ('# Mydiv '). append ('<span contenteditable = "false"> <span id = "someid" contenteditable = "true"> Some TExt </span> ');
// Then I want to handle the keypress event on the inserted span
$ ('# Someid'). keypress (function (event) {alert ('test ');});
}
$ (Function ()
{
$ ('# Mydiv'). keypress (function (event) {AppendSpan ();});
});

Demo html:Copy codeThe Code is as follows: <div id = "mydiv" contenteditable = "true">
Editable follows:
</Div>

2. Put your # mydiv in a non-editable state. When you need to trigger a span keyboard event
Demo js:Copy codeThe Code is as follows: function AppendSpan ()
{
$ ('# Mydiv'). removeAttr ('contenteditable'). append ('<span id = "someid" contenteditable = "true"> Some TExt </span> ');
// Then I want to handle the keypress event on the inserted span
$ ('# Someid'). keypress (function (event) {alert ('test ');});
}
$ (Function ()
{
$ ('# Mydiv'). keypress (function (event) {AppendSpan ();});
});

Demo html:Copy codeThe Code is as follows: <div id = "mydiv" contenteditable = "true">
Editable follows:
</Div>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.