设置专注于div contenteditable元素

我有一个<div contenteditable=true>我在那里定义一个所见即所得的一些元素。例如<p>,<h1>等。我想直接把重点放在这些元素之一上。设置专注于div contenteditable元素

例如在<p id="p_test">上。但似乎focus()功能不能在<div>元素，<p>元素...

是否有另一种方法来定义在我的情况下重点？

来源

2010-03-05 sanceray3

您不能关注div或p，因为没有针对它的操作，您想要关注什么？ – 2010-03-05 16:19:30

有没有人知道有办法做到这一点呢？ – 2012-03-30 04:38:22

+45

@NickCraver这个问题提到它的内容是可编辑的，这意味着你可以输入和编辑它。完全有效的问题imo – Blowsie 2012-12-10 16:33:32

-6

将“click”事件处理程序绑定到contenteditable div中的所有元素，并在点击时更改类/样式（即将类“focused”添加到元素）;

您可以通过添加样式（如彩色边框或内部阴影框）向用户标识哪个元素具有焦点。然后，当你要访问的焦点元素在你的jQuery脚本，只是做这样的事情：

var focused = $('.focused');

来源

2012-04-20 20:05:04

他问实际将用户的插入符号移动到元素上，而不仅仅是对选定元素进行造型。 – 2013-07-17 20:08:07

这没有任何帮助。 – 2014-11-07 00:36:31

我注意到，jQuery的焦点（）我用宽度和高度为0 CONTENTEDITABLE DIV没有工作。我用.get（0）.focus（）替换它 - 本地javascript焦点方法 - 它可以工作。

来源

2013-02-05 05:56:24 Vlad

哪个浏览器？它似乎并不适用于Safari，但Firefox和Chrome可以很好地处理它。 – 2013-07-17 20:00:09

这真是太棒了！感谢您找出这个问题并分享！ – Rogala 2015-05-04 23:10:26

任何想法如何可以在香草js工作？ – 2015-10-12 15:40:38

在现代浏览器中，你可以使用：

var p = document.getElementById('contentEditableElementId'), 
    s = window.getSelection(), 
    r = document.createRange(); 
r.setStart(p, 0); 
r.setEnd(p, 0); 
s.removeAllRanges(); 
s.addRange(r);

但是，如果你的元素是空的我得到了一些奇怪的问题所以对于空元素，你可以这样做：

var p = document.getElementById('contentEditableElementId'), 
    s = window.getSelection(), 
    r = document.createRange(); 
p.innerHTML = '\u00a0'; 
r.selectNodeContents(p); 
s.removeAllRanges(); 
s.addRange(r); 
document.execCommand('delete', false, null);

删除NBSP光标后停留在p元素内

PS只是普通的空间不适合我

来源

2013-05-31 18:49:52

示例中的变量p是什么？ – 2014-06-16 23:09:28

@BT我认为它的根元素P，尽管他应该澄清它而不留有任何疑问。 – 2015-06-22 06:09:44

在众多的建议解决方案中，这是唯一一个为我工作的，允许我将焦点放在jquery对话框中的令人满意的div上。 – 2016-07-18 09:59:31

工作，以防有人，谁使用MediumEditor管理contenteditable元素，绊倒在这个问题上，以下为我工作：

editor.selectElement(editorDOMNode);

editor是一个实例的MediumEditor。
editorDOMNode是对实际的contenteditable DOM节点的引用。
也可以聚焦于特定的子节点上的编辑器中，如下所示：
```
editor.selectElement(editorDOMNode.childNodes[0]); 
```

来源

2016-03-02 10:14:46 Eye

老的文章，但没有一个解决方案为我工作。我最终想到它：

var div = document.getElementById('contenteditablediv'); 
setTimeout(function() { 
    div.focus(); 
}, 0);

来源

2016-05-11 12:03:38 chris97ong

不知道为什么，这完全合理！在setTimeout中包裹.focus（）逻辑做了一些小技巧！谢谢！ – sga4 2016-11-07 14:21:27

@ sga4很高兴帮助:) – chris97ong 2016-11-08 00:10:01

不错！有些东西需要返回到调度程序才能正确操纵。浏览器很奇怪。谢谢！ – 2016-12-12 03:04:43

你可以试试这个代码，它可以自动对焦你的最后一个插入位置。

let p = document.getElementById('contenteditablediv') 
let s = window.getSelection() 
let r = document.createRange() 
r.setStart(p, p.childElementCount) 
r.setEnd(p, p.childElementCount) 
s.removeAllRanges() 
s.addRange(r)

来源

2017-03-04 17:08:17 Surmon

设置专注于div contenteditable元素

回答

相关问题