Question

您好，感谢您花时间阅读本文。

如果我在下面有以下功能，那么当我在文本框中书写时，会突出显示#和@。

当我/用户输入Hightlight键（ @ / ＃）时，它会围绕它创建一个<span> tag。当使用空间时，它会停止高光

我的问题是，如何在<span> tag内查看我是否输入内容，因为我需要在使用类型@this或#this时发生某些事情然后停止使用命中空格键。

我希望你理解我的问题，我感谢你的时间。

(function ($) {
    $.fn.hashtags = function () {
        $(this).wrap('<div class="Hashtags"><div class="highlighter"></div></div>').unwrap().before('<div class="highlighter"></div>').wrap('<div class="typehead"></div></div>');
        $(this).addClass("theSelector");
        autosize($(this));
        $(this).on("keyup", function () {
            var str = $(this).val();
            $(this).parent().parent().find(".highlighter").css("width", $(this).css("width"));
            str = str.replace(/\n/g, '<br>');
            if (!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([a-zA-Z0-9]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?@([a-zA-Z0-9]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([\u0600-\u06FF]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?@([\u0600-\u06FF]+)/g)) {
                if (!str.match(/#(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))#/g)) { //arabic support
                    str = str.replace(/#(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))/g, '<span class="hashtag">#$1</span>');
                } else {
                    str = str.replace(/#(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))#(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))/g, '<span class="hashtag">#$1</span>');
                }
                if (!str.match(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))@/g)) {
                    str = str.replace(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))/g, '<span class="hashtag">@$1</span>');
                } else {
                    str = str.replace(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+))/g, '<span class="hashtag">@$1</span>');
                }
            }
            $(this).parent().parent().find(".highlighter").html(str);
        });
        $(this).parent().prev().on('click', function () {
            $(this).parent().find(".theSelector").focus();
        });

    };
})(jQuery);

$(document).ready(function () {
            $("textarea").hashtags();
  });

.Hashtags .highlighter{
  white-space: pre-wrap;
	color:transparent;
	overflow: hidden; 
	position: absolute;
	padding-left:7px;
	padding-top:5px; 
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:20px;
}

.Hashtags .theSelector{
	background-color: transparent; 
	position: relative; 
	direction: ltr; 
	font-size:14px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	resize:none !important;
	-webkit-transition: height 0.2s;
	border: 1px solid #cccccc;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 4px 6px;
	vertical-align:middle;
	min-height:48px !important;
	line-height:20px;
}

.Hashtags .hashtag{
	background: -webkit-linear-gradient(#dce6f8, #bdcff1);
	border-radius: 2px;
	box-shadow: 0 0 0 1px #a3bcea;
	font-size:14px;
	white-space: pre-wrap;
	word-break: break-word;
	line-height:20px;
}

<script src="http://www.jacklmoore.com/js/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <textarea style="width: 250px; min-height: 100px!important;"></textarea>

Answer 1

基于this answer我发现了一个使用rangy.js库的jsfiddle。 font元素中的I modified the script a bit and it wraps all strings of the pattern @string，但您可以根据自己的需要进行调整： - ）

完整代码：

<div contenteditable="true" id="pad" onkeyup="formatText();"></div>

JS：

function saveSelection(containerEl) {
    var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};
    var sel = rangy.getSelection(), range;

    function traverseTextNodes(node, range) {
        if (node.nodeType == 3) {
            if (!foundStart && node == range.startContainer) {
                start = charIndex + range.startOffset;
                foundStart = true;
            }
            if (foundStart && node == range.endContainer) {
                end = charIndex + range.endOffset;
                throw stop;
            }
            charIndex += node.length;
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                traverseTextNodes(node.childNodes[i], range);
            }
        }
    }

    if (sel.rangeCount) {
        try {
            traverseTextNodes(containerEl, sel.getRangeAt(0));
        } catch (ex) {
            if (ex != stop) {
                throw ex;
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

function restoreSelection(containerEl, savedSel) {
    var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {};
    range.collapseToPoint(containerEl, 0);

    function traverseTextNodes(node) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                throw stop;
            }
            charIndex = nextCharIndex;
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                traverseTextNodes(node.childNodes[i]);
            }
        }
    }

    try {
        traverseTextNodes(containerEl);
    } catch (ex) {
        if (ex == stop) {
            rangy.getSelection().setSingleRange(range);
        } else {
            throw ex;
        }
    }
}


function formatText() {
    var el = document.getElementById('pad');
    var savedSel = saveSelection(el);
    el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
    el.innerHTML = el.innerHTML.replace(/(\@[0-9a-z]+)/ig,"<font color='red'>$1</font>");

    // Restore the original selection
    restoreSelection(el, savedSel);
}

Working example

检测是否在span标记内键入内容

1 个答案: