CODEWITHSUNDEEP
jquery
Travis Pettry
Travis Pettry

Reputation: 1352

jQuery Focus on Div with contentedible

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();
                }
            });

Upvotes: 0

Views: 2121

Answers (3)

Paul Calabro
Paul Calabro

Reputation: 1906

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>

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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/

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

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

Upvotes: 1

Related Questions