对 div 禁用焦点答案

【问题标题】：Focus disable on div对 div 禁用焦点
【发布时间】：2015-02-11 08:09:11
【问题描述】：

下午好。告诉我如何禁用元素翻译本身的焦点？通过单击 div 它不应该转换自己的焦点。谢谢你。

https://jsfiddle"dot"net/ironviper/boyorkdy/

如果您在“我的文本”中单击鼠标，然后单击“CLECK ME i'm button”，则焦点将保留在“我的文本”字段中。如果在“My text here”中单击鼠标，则单击“CLECK ME i'm div”是焦点离开字段“My text here”。当您单击“CLECK ME i'm div”时，如何使焦点远离“我的文本”字段？

【问题讨论】：

请提供问题的演示
你在说什么？编辑您的帖子并添加一些您已经尝试过的代码。
我们无法关联那么多

标签： javascript html css

【解决方案1】：

您可以将焦点设置为可编辑的 div。我从How to move cursor to end of contenteditable entity找到了'setEndOfContenteditable'函数

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="editId" contenteditable="true">My text here</div>
    <div id="myDiv" onclick="myclick();">CLICK ME i'm div</div>
</body>
<script>
    function myclick() {
        var el = document.getElementById("editId");
        el.focus();
        setEndOfContenteditable(el);
    }

    function setEndOfContenteditable(contentEditableElement) {
        var range, selection;
        if (document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if (document.selection)//IE 8 and lower
        {
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }
</script>
</html>

【讨论】：