Question

当我按下回车键时，我无法改变对div的关注。有人可以帮忙吗？

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

Answer 1

试试这个：

<强> 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>

制作last div contenteditable="true"，它应该是outside main div

<强>脚本：

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

    }
});

小提琴： http://jsfiddle.net/Q4J87/

您可以像

一样使用它

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

小提琴： http://jsfiddle.net/Q4J87/1/

Answer 2

默认情况下，焦点对div不起作用。

焦点事件在获得焦点时发送到元素。此事件隐式适用于有限的元素集，例如表单元素（，等）和链接（）。在最近的浏览器版本中，可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。元素可以通过键盘命令（例如Tab键）或通过鼠标单击元素来获得焦点。

Read

Answer 3

以下代码应该有效：

<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>

jQuery专注于Div与contenteditable

3 个答案:

Read