所以我正在制作一个文本编辑器，但我需要做的是
1)当我输入“Col1”时，按空格后，它应该自动完成为“Column 1”
我是 HTML 和 Js 新手，看到了一些关于 onkeyup 和监视事件的示例，但它似乎不适合，或者我可能会出错
任何帮助将不胜感激
顺便说一句，使用 NicEdit 作为基础
我的 HTML
<html>
<head>
<title>Custom Text Editor</title>
</head>
<body>
<div id="menu"></div>
<div id="intro">
By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced.
</div>
<br />
<div id="sample">
<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<h4>Rich Text</h4>
<textarea name="area1" cols="40" style="width: 100%" onkeyup="myFunction()"></textarea>
<br />
<h4>Second Textarea</h4>
<textarea name="area2" style="width: 100%;">
Some Initial Content was in this textarea
</textarea>
<br />
<h4>Third Textarea</h4>
<textarea name="area3" style="width: 300px; height: 100px;">
HTML <b>content</b> <i>default</i> in textarea
</textarea>
</div>
</body>
</html>
<script>
function myFunction() { var x = document.getElementById("a").value; document.getElementById("abc").innerHTML = x; }
</script>最佳答案
由于您使用的是 nicEdit，因此无法附加函数 onkeydown="myFunction(this, event)" 到 textarea name="area1" 元素。
这是因为 nicEdit 更改了您的 DOM 并在所有运行的地方创建了一个 div contenteditable。
因此，您可以将 keydown 事件委托(delegate)给父 div sample。
document.getElementById('sample').addEventListener('keydown', function(e) {
if (e.target.tagName == 'DIV' && e.target.classList.contains('nicEdit-main')) {
e.stopPropagation();
myFunction(e.target, e);
}
});
对于您的 myFunction，您可以使用不同的方法来获取插入符位置、更改文本和更新。
示例:
function myFunction(obj, e) {
// get the pressed key
var charCode = e.keyCode || e.which;
// covert the keycode to char
var charStr = String.fromCharCode(charCode);
// if a space
if (charStr == ' ') {
// get current position inside the textarea
var startPoint = window.getSelection().anchorOffset;
var node = window.getSelection().anchorNode;
// check if the previous 4 chars are Col1
if (node.nodeValue.substr(startPoint - 4, 4) == 'Col1') {
// discard the space pressed
e.preventDefault();
// adjust the text
node.nodeValue = node.nodeValue.substr(0, startPoint - 1) + 'umn 1' + node.nodeValue.substr(startPoint);
obj.focus();
var range = document.createRange();
range.setStart(node, startPoint + 4);
range.setEnd(node, startPoint + 4);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
}
bkLib.onDomLoaded(function () {
nicEditors.allTextAreas()
});
document.getElementById('sample').addEventListener('keydown', function(e) {
if (e.target.tagName == 'DIV' && e.target.classList.contains('nicEdit-main')) {
e.stopPropagation();
myFunction(e.target, e);
}
});<script src="http://js.nicedit.com/nicEdit-latest.js"></script>
<div id="menu"></div>
<div id="intro">
By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with
nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced.
</div>
<br/>
<div id="sample">
<h4>Rich Text</h4>
<textarea name="area1" cols="40" style="width: 100%"></textarea>
<br/>
<h4>Second Textarea</h4>
<textarea name="area2" style="width: 100%;">
Some Initial Content was in this textarea
</textarea>
<br/>
<h4>Third Textarea</h4>
<textarea name="area3" style="width: 300px; height: 100px;">
HTML <b>content</b> <i>default</i> in textarea
</textarea>
</div>关于javascript - 输入内容后需要调整文本编辑器中的字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41428438/