作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我一直在尝试构建一个基于网络的文本编辑器。作为该过程的一部分,我正在尝试动态创建和修改基于元素的事件和用于字体编辑的击键事件。在这个特别的jsfiddle示例 我试图在按下 CTRL+b 并将焦点/插入符设置在强元素内时创建强元素,以便随后输入的文本将成为粗体元素的一部分,因此将具有粗体文本。但我的代码只是创建了一个强大的元素,而不是转移焦点,因此没有文本变得更粗。
在下面的代码中,我正在创建事件监听器来捕获击键事件
p=document.getElementsByTagName("p")[0];
//console.log(p)
// adding eventlistener for keydown
p.addEventListener("keydown",listener);
// eventlistenerr callback function
function listener(){
e=window.event;
if(e.ctrlKey && e.keyCode==66)
{
console.log("CTRL+B");
// creating bold element
belm=document.createElement("strong");
belm.setAttribute("contenteditable","true")
p.appendChild(belm);
//bug below
// setting focus inside bold element
setfocus(belm,0);
e.preventDefault();
}
}
这里是设置焦点的函数。
function setfocus(context, position){
var range = document.createRange();
position =position || 0;
var sel = window.getSelection();
range.setStart(context, position);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
context.focus();
}
但是,我并不怀疑设置焦点的函数是错误的,因为如果您观察到,在 fiddle 中,我已经创建了一个单独的设置来测试它 出去。单击“单击此处”按钮,焦点将毫不费力地动态转移到段落元素。我无法弄清楚出了什么问题。
最佳答案
将光标移动到可内容编辑的 div 中的空元素几乎是不可能的。然而,作为shay levi在另一篇文章中建议,您可以将零宽度字符 ÈB
插入到您的空元素中以为其提供索引值。
这是一个例子*:
function insertNode(nodeName) {
var sel = window.getSelection(),
range;
range = sel.getRangeAt(0);
range.deleteContents();
var child = document.createElement(nodeName);
child.innerHTML = '​';
range.insertNode(child);
}
var div = document.querySelector('div'),
btn = document.querySelector('button');
btn.addEventListener('click', function() {
insertNode('strong');
div.focus();
});
div.focus();
<div contenteditable></div><button><strong>B</strong></button>
*为了简单起见,这个脚本不会切换粗体文本,它只是设置它。
关于javascript - 在内容可编辑的段落中存在的粗体元素内设置插入符号(光标),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47140825/
下面是我用来制作 1px 文本描边轮廓的代码。但是如何使轮廓变粗呢?如果我只是用“5px”替换所有“1px”,结果看起来很疯狂。 HTML Hello! CSS .element { color:
我是一名优秀的程序员,十分优秀!