Question

我有一个div，其contenteditable属性设置为true。当用户键入'#'或'@'时，我希望获取他/她键入的内容，直到按下空格键。这样，我可以根据他/她可能输入的单词从db中提出建议请看下面的例子，

<div id="editableDiv" contenteditable="true">
    I may tweet from @twitter in the near #future
    <ul id="suggestUL"></ul>
</div>

只要用户输入'@'或'#'，我就必须能够收集他/她可能输入的任何内容（根据上面的示例，在 @ 之后{{1 }}，t，tw，twi，twit，twitt和twitte。并在＃ {之后{1}}，twitter ... f）。在fu之后，用户输入了空格键，因此，单词集合必须停止，并且必须再次从future开始。

被修改
用于获取我可以显示建议列表的像素的代码

'twitter'

这是我在函数上面调用的方式

PS：我不知道为什么我因为Title的名声而被罚款。无论如何，我编辑标题更清晰。我是学习者，如果我在选择题目或提问时出错，请提出建议提前谢谢。

Answer 1

您可以使用以下脚本，同时需要使用一些UL / LI元素组合，一旦从服务器获取数据，每行将显示一条建议。您可以使用jQuery Ajax从服务器获取数据并动态创建ul / li列表。

    var fetchData = false;
    var suggestionChar = '';
    $('#editableDiv').on('keypress',function(event){
         var keyCode = event.which || event.keyCode.
         var hashKey; // Set keyCode for #
         var atKey; // Set keycode for @
         var spaceKey //SpaceKey code
        if(keyCode == hashKey || keyCode == atKey){
            fetchData = true
            suggestionChar = '';
            return; //flag is set now look out for next key cod.
        }
       else if ( keyCode == spaceKey ){
           fetchData = false;
           suggestionChar = '';
        }
       if( fetchData){
           var data = String.fromCharCode(keyCode);
           suggestionChar = suggestionChar + data;
           // use "suggestionChar" for fetching the data from server.
           // fetch suggestions  from Server.
           // On success call back create the dynamic list of ul/li which will show the suggestion to user. You need to bind the user click event and/or keypress event for ul/li so that user can select the suggestion using mouse and keyboard along with 'Space' key.
        }
    })

Answer 2

我做过这些东西（仅限textarea）：http://jsfiddle.net/wared/sL2sZ/。我试图满足您的要求，但使用可编辑的DIV使事情变得更加耗时。我决定放弃并从StackOverflow中获取灵感。您可以从我的代码中获取一些想法，以实现您的目标，希望如此。有关getCaret()的更多信息，请访问https://stackoverflow.com/a/263796/1636522。

衬衣尾...

目前，您可以获得插入符号的像素位置，而我的代码为您提供了一种方法来获取当前插入符号索引周围的单词。缺少的链接是一个跨浏览器的解决方案，用于从可编辑的DIV获取插入符号索引（这是我放弃的地方，对我来说太多的工作），实际上，当前版本的getCaret()只接受textarea。 / p>

换句话说，您所要做的就是修改getCaret()的正文，以使其与可编辑的DIV一起使用。获得索引后，您可以通过getWord()获得单词，因此，您可以检查它是否以“@”为前缀，然后使用getCaretPixelPos()显示相应的建议。

$('textarea').on('click keyup', function isAt() {
    var idx = getCaret(this),
        text = $(this).val(),
        word = getWord(text, idx);
    $('p').html([
        '"', word, '" ', word.charAt(0) === '@' 
        ? '<span style="color:blue">is prefixed</span>' 
        : '<span style="color:red">is not prefixed</span>'
    ].join(''));
}).focus();

function getWord(s, i) {
    var r = /\s/g;
    if (!i || r.test(s[i - 1])) return '';
    while (i && !r.test(s[--i])) {}
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) || { index: s.length }
    ).index);
}

Answer 3

试试这个：

var str = '';
$('#editableDiv').keyup(function(e){
  if($(this).val() == '@' || $(this).val() == "#"){
    if(e.keyCode !=32){  
      str += String.fromCharCode(e.keyCode);
    }
  }
});
alert(str);

Answer 4

我终于能够从你所有的输入中解决问题了这是代码

在 KeyDown

上调用的函数

var fetchSuggestions = false;
var suggestForString = '';
function fnShowSuggestionUL(e) {
    var event = e || window.event;
    var keyCode = event.keyCode || event.which;
    // KeyCode = 35 -> #
    // KeyCode = 64 -> @
    // KeyCode = 32 -> space
    // KeyCode = 13 -> Enter (Carriage Return)
    if (keyCode == 35 || keyCode == 64) {
        fetchSuggestions = true;
        suggestForString = '';
        $('#suggestUL').css('display', 'block');
        fnPositionSuggestUL();
    }
    else if (keyCode == 32 || keyCode == 13) {
        fetchSuggestions = false;
        suggestForString = '';
        $('#suggestUL').css('display', 'none');
        return;
    }
    if (fetchSuggestions == false)
        return;
    var data = String.fromCharCode(keyCode);
    suggestForString = suggestForString + data;
    // TODO: bring suggestions from database and append them as list items to "suggestUL"
}

在角色'@'或'#'

中定位 suggestUL

function fnPositionSuggestUL() {
    var $node = $('#editableDiv')[0]
    var offsetx = 0;
    var offsety = 0;

    var nodeLeft = 0,
    nodeTop = 0;
    if ($node) {
        nodeLeft = $node.offsetLeft;
        nodeTop = $node.offsetTop;
    }

    var pos = { left: 0, top: 0 };

    if (document.selection) {
        var range = document.selection.createRange();
        pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
        pos.top = range.offsetTop + offsety - nodeTop + 'px';
    } else if (window.getSelection) {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0).cloneRange();
        try {
            range.setStart(range.startContainer, range.startOffset - 1);
        } catch (e) { }
        var rect = range.getBoundingClientRect();
        if (range.endOffset == 0 || range.toString() === '') {
            // first char of line
            if (range.startContainer == $node) {
                // empty div
                if (range.endOffset == 0) {
                    pos.top = '0';
                    pos.left = '0';
                } else {
                    // firefox need this
                    var range2 = range.cloneRange();
                    range2.setStart(range2.startContainer, 0);
                    var rect2 = range2.getBoundingClientRect();
                    pos.left = rect2.left + offsetx - nodeLeft;
                    pos.top = rect2.top + rect2.height + offsety - nodeTop;
                }
            } else {
                pos.top = range.startContainer.offsetTop;
                pos.left = range.startContainer.offsetLeft;
            }
        } else {
            pos.left = rect.left + rect.width + offsetx - nodeLeft;
            pos.top = rect.top + offsety - nodeTop;
        }
    }
    //Create suggestUL if does not exist or destroyed
    fnCreateSuggestUL();

    $('#suggestUL').css('left', pos.left + 'px').css('top', (pos.top + 18)+'px');
};

我要感谢在这里回答/评论过的所有人请尽可能优化上面的代码，以便有需要的人获得完美的代码。

PS：在Chrome和Firefox中运行完美。 suggestUL 在IE中没有正确定位 Happy Coding!!

如何收集div中＃或@旁边键入的字符/单词

4 个答案: