Question

（请不要jquery）

给定value被/\s+/g拆分的html输入，您如何找到插入符所在的当前标记？

例如，如果您的输入值是

abc      ab          monkey

你分开了，它会变成

["abc, "ab", "monkey"]

但是如果输入中的插入位置在这里......

abc      ab        monk^(caret here)ey

您如何确定插入符当前所在的标记？

我正在寻找的api就像是

var currentToken = getPosition(inputEl.value); // { index: 2, token: "monkey" }

我把它的大部分都放下了，但是当我用左箭头开始在输入中回溯时，它就搞砸了。

http://jsfiddle.net/dlizik/zmbpq5hz/

HTML

<input id="input" />
<pre id="test"></pre>
cursor at current token: <span id="res"></span>

JS

(function($doc) {
    "use strict";    

    var single = /\s/g;
    var spacer = /\s+/g;
    var disp = $doc.getElementById("test");
    var input = $doc.getElementById("input");
    var res = $doc.getElementById("res");

    function keyListen(e) {
        var tokens = this.value.split(spacer);
        var tokenLengths = tokens.map(function(i) { return i.length; });
        var cumulative = tokenLengths.map(function(i, n) {
            return tokenLengths.slice(0, n + 1).reduce(function(a, b) {
                return a + b;
            });
        });
        var cursor = caretPos(this);
        var currToken = tokens[getPos(cursor, cumulative)];
        res.textContent = currToken;
        disp.textContent = JSON.stringify(this.value.split(spacer), null, 2);
    }

    function getPos(curr, arr) {
        for (var i = 0; i < arr.length; i++) {
            if (curr <= arr[i]) return i;
        }
    }

    function caretPos(el) {
        var val = el.value;
        var extra = val.match(single);
        var whitespace = extra == null ? 0 : extra.length;
        var pos = 0;
        if ($doc.selection) {
            el.focus();
            var sel = $doc.selection.createRange();
            sel.moveStart('character', -val.length);
            pos = sel.text.length;
        }
        else if (el.selectionStart || el.selectionStart == '0') pos = el.selectionStart;
        return (pos - whitespace);
    }

    input.addEventListener("keyup", keyListen.bind(input), false);

})(document);

Answer 1

好的，所以你可以使用正则表达式......现在我没想到它。您只需要找到插入符号位置剩余的字数。这将为您提供当前令牌索引以及字符串本身。但是，您只需要考虑其相邻字符串都是空格的插入符号。

http://jsfiddle.net/dlizik/zmbpq5hz/1/

这是您要运行的功能

(function($doc) {
    "use strict";    

    var single = /\s/g;
    var tokenize = /[^\s+]/g;
    var ledge = /[\s]*[^\s]+[\s]*/g;
    var disp = $doc.getElementById("test");
    var input = $doc.getElementById("input");
    var res = $doc.getElementById("res");

    function keyListen(e) {
        var tokens = this.value.match(tokenize);
        var pos = caretPos(this);
        var adj = this.value.substring(pos - 1, pos + 1);
        var left = this.value.slice(0, pos + 1).match(ledge).length - 1;
        var curr = adj === "  " ? null : tokens[left];
        res.textContent = curr + "";
        disp.textContent = JSON.stringify(this.value.split(spacer), null, 2);
    }

    function caretPos(el) {
        var pos = 0;
        if ($doc.selection) {
            el.focus();
            var sel = $doc.selection.createRange();
            sel.moveStart('character', -el.value.length);
            pos = sel.text.length;
        }
        else if (el.selectionStart || el.selectionStart == '0') pos = el.selectionStart;
        return (pos);
    }

    input.addEventListener("keyup", keyListen.bind(input), false);

})(document);

在标记化的html输入中确定插入位置？

1 个答案: