使用Jquery实现Hashtags

我想要做的基本上是每当我写一个以＃开头的东西时，标记字符串的颜色应该立即改为其他颜色，比如蓝色。 当我按空格键结束字符串时，颜色应该变回黑色。 我在一个令人满意的div上尝试了这样的逻辑：

if (# is pressed) hashtagging = true append "" to div if (space is pressed and hashtagging is true) hashtagging = false append "" to div 

这没有按预期工作。

Answer 1

这样的事应该做​​：

 $(function() { var hashtags = false; $(document).on('keydown', '#myInputField', function (e) { arrow = { hashtag: 51, space: 32 }; var input_field = $(this); switch (e.which) { case arrow.hashtag: input_field.val(input_field.val() + ""); hashtags = true; break; case arrow.space: if(hashtags) { input_field.val(input_field.val() + ""); hashtags = false; } break; } }); }); 

现在，此代码检查keydown是否按下了＃标签或空格，并为其添加了带类的样式。 检查keydown而不是keyup的原因是在将实际输入添加到文本字段之前添加标记。 我使用文本字段作为输入，但可以根据需要进行修改。

Answer 2

这是一个工作实例，通过将Sondre给出的解决方案与Mr_Green的解决方案（ 将插入位置始终以可信的div结束 ）结合起来，将插入符号放在最后。

http://jsfiddle.net/344m4/1/

 var hashTagList = []; function logHashList(){ hashTagList = []; $('.highlight').each(function(){ hashTagList.push(this.innerHTML); }); for(var i=0;i<hashTagList.length;i++){ alert(hashTagList[i]); } if(hashTagList.length==0){ alert('You have not typed any hashtags'); } } $(function() { var hashtags = false; $(document).on('keydown', '#example-one', function (e) { arrow = { hashtag: 51, space: 32 }; var input_field = $(this); switch (e.which) { case arrow.hashtag: e.preventDefault(); input_field.html(input_field.html() + "#"); placeCaretAtEnd(this); hashtags = true; break; case arrow.space: if(hashtags) { e.preventDefault(); input_field.html(input_field.html() + " "); placeCaretAtEnd(this); hashtags = false; } break; } }); }); function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } }