jQuery Focus on Div with contentedible

Question

When I hit the enter key I cannot change the focus on the divs. Can anyone help?

<div contenteditable="true" id="t" tabindex="-1">
            <div class="me" spellcheck="true" content="inhert" >Hello <span style="font-weight: normal;">world2!</span></div>
            <div class="me" spellcheck="true" content="inhert" >Hello <span style="font-weight: normal;">world3!</span></div>
            <div class="me" spellcheck="true" content="inhert" id="last">Hello <span style="font-weight: normal;">world4!</span></div>
</div>

$("div").bind("keypress", function(event){
                if(event.keyCode == 13){                            
                    event.preventDefault();
                    $("#last").focus();
                }
            });

wrap code inside document.ready... – Dipesh Parmar Mar 15 '13 at 05:03 — Dipesh Parmar, Mar 15 '13 at 05:03

Rohan Kumar · Answer 1 · 2013-03-15T05:18:22.113

Try this:

HTML:

<div contenteditable="true" id="t" tabindex="-1">
    <div class="me" spellcheck="true" content="inhert" >Hello 
        <span style="font-weight: normal;">world2!</span></div>
    <div class="me" spellcheck="true" content="inhert" >Hello 
        <span style="font-weight: normal;">world3!</span></div>       
</div>
<div contenteditable="true" class="me" spellcheck="true" content="inhert" id="last">Hello 
    <span style="font-weight: normal;">world4!</span></div>

Make the last div contenteditable="true" and it should be outside the main div

Script:

$("div").bind("keypress", function(event){
    if(event.keyCode == 13){    
        //alert('ya');
        event.preventDefault();
        $("#last").focus();

    }
});

Fiddle: http://jsfiddle.net/Q4J87/

You can use it like

$("#last").prop('contenteditable',true).focus();
// alternative if contenteditable not set for last div

Fiddle: http://jsfiddle.net/Q4J87/1/

its working fine..there is no alternative for adding div with contenteditable property.. — sasi, Mar 15 '13 at 05:08
Yes without `contenteditable` it can not be possible. Read http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus for `focus`, also `focus` will `set` only for `editable elements`. — Rohan Kumar, Mar 15 '13 at 05:15

score 1 · Answer 2 · answered Mar 15 '13 at 05:06

1

Focus does not work on divs by default.

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

Read

answered Mar 15 '13 at 05:06

Dipesh Parmar

27,090
8
61
90

Hey Dipesh, it looks like his div has a tab index like the document mentions. Sounds like it should work. – Paul Calabro Mar 15 '13 at 05:12

score 0 · Answer 3 · answered Mar 15 '13 at 05:21

The following code should work:

<html>
        <head>
                <title>Test Website</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <script>
                        $(document).ready(function() {
                                                $("div#last").focus();
                        });
                </script>
        </head>
<body>

        <div contenteditable="true" id="t" tabindex="1">
                    <div class="me" spellcheck="true" content="inhert" >Hello <span style="font-weight: normal;">world2!</span></div>
                    <div class="me" spellcheck="true" content="inhert" >Hello <span style="font-weight: normal;">world3!</span></div>
                    <div class="me" spellcheck="true" content="inhert" tabindex="2" id="last">Hello <span style="font-weight: normal;">world4!</span></div>
        </div>


</body>

</body>
</html>

I think the issue was you weren't including a tabindex on the div you wanted to focus on. As someone alluded to, this is a requirement for all elements that aren't in that limited set of elements that have the ability to gain focus. — Paul Calabro, Mar 15 '13 at 05:23

jQuery Focus on Div with contentedible

3 Answers3

Read