javascript - 用户输入时自动插入字符串

Question

在“首选项:代码提示”中，Dreamweaver 有以下选项:

Close tags: After typing the open tag's ">"

我正在向学生教授 html，并让他们在文本区域中编写代码(这不是最好的 UI，但至少在我自己的网站上是这样)。

我想在用户键入“>”以结束开始标记时立即插入结束标记，并将光标的位置保持在开始标记和结束标记之间。

;(function() {
	var Variables = {}
	Variables.greaterThan = false
	$('[name=GuessName]').keypress(keypress)
	function keypress(myEvent) {
		if (myEvent.which === 62) {
			Variables.greaterThan = true
		}
	}
	$('[name=GuessName]').keyup(keyup)
	function keyup(myEvent) {
		if (Variables.greaterThan) {
			var myTextarea = $(this).val()
			var startingPosition = -1
			var length = myTextarea.length-1
			for (var i=myTextarea.length; i>= 0; i--) {
				if (myTextarea.substr(i,1) === '<') {
					startingPosition = i
					break
				}
			}
			if (startingPosition > -1) {
				myTextarea += '</' + myTextarea.substr(startingPosition+1,length)
				$(this).val(myTextarea)
			}
			Variables.greaterThan = false
			// position the cursor at the appropriate spot
		}
	}
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter &lt;h1>
<textarea name="GuessName"></textarea>

Answer 1

我选择提供普通的 JavaScript 响应，可以在此处找到其现场演示:https://jsfiddle.net/Tomboyo/f8nLfwmn/6/

首先，我们将一个事件监听器附加到绑定(bind)到“keyup”事件的文本区域。当事件触发时，它使用 getStrPos 查找当前光标位置。函数(实际上只是下面链接的文章中找到的函数的修改版)。然后，我们获取光标位置左侧的文本(但左侧最多只能有 50 个字符，因为我们不希望 html 标签那么长，而且坦率地说，我们不想在以下位置运行正则表达式搜索)一大堆文本)。

此 block 中的“this”关键字引用文本区域:

    var pos = getStrPos('myArea');
    var retrotext = this.value.slice(Math.max(0, pos - 50), pos);
    var m = retrotext.match(/(?:<\/?)([^<>]+)(?:>)/g);

blacklist接下来在脚本中定义的变量列出了不应关闭的标签名称(例如 <br> 和 <input> 标签)。该列表目前并不详尽；根据您的需要进行更新。

var blacklist = ['input', 'br', 'hr'];

这最后一部分会删除任何与黑名单条目匹配的找到的标签，并防止将结束标签插入到已经关闭的标签中。我们假设所有标签在用户键入时都会关闭，因此如果前面的标签是关闭标签，则光标放错位置，或者“>”字符在这种情况下是错误的。 insertAfterCaret功能是我在网上找到的。我之前提到过 getStrPos基于这个函数，因此可以从我在这个答案底部引用的文章中了解两者的理解。

    } else {
        //blacklist pruning
        for (var i = 0; i < blacklist.length; i++) {
            if (m[m.length - 1] == '<'+blacklist[i]+'>') {
                return;
            }
        }
        insertAfterCaret('myArea', m[m.length - 1].slice(0, 1) + "/" + m[m.length - 1].slice(1));
    }

在光标处插入(及其衍生物)可以在这里找到: http://web.archive.org/web/20110102112946/http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

更新第六个修订版防止用户在编辑内部标签时重新关闭关闭标签。现在，它会进行前向检查(最多 50 个字符)以查找与左侧开始标记匹配的结束标记。如果有，则键入的“>”可能是错误的，因此不会插入标签。

        var anterotext = this.value.slice(pos, Math.min(pos + 50, this.value.length));
        var closeTag = m[m.length - 1].slice(0, 1) + "/" + m[m.length - 1].slice(1);
        var n = anterotext.match(closeTag);
        if (n) { return; }
        insertAfterCaret('myArea', closeTag);