【问题标题】:Facebook Hashtags (Highlighting inside the textarea)Facebook Hashtags(在文本区域内突出显示)
【发布时间】:2014-06-18 13:29:21
【问题描述】:

我想像 facebook 一样在 textarea 中添加 highlight the text。对此的解决方案是保留一个外部 div 并突出显示,如 fiddle 中所示。但是可能会有多个突出显示的字段,然后必须每时每刻计算位置和宽度,这看起来很复杂。退格键也应立即删除完整的标签。有什么方法可以实现这些hashtags 或实现上述相同技术的任何示例代码?

【问题讨论】:

  • 这里是一个 angularjs 指令,它创建一个支持 facebook 的内容可编辑 div,例如主题标签突出显示 github.com/sujeet100/ngHashtags 类似的逻辑可用于创建您想要的内容,而无需使用 angularjs。

标签: javascript jquery html css hashtag


【解决方案1】:

突出显示发生在背景层上,该背景层在 keyup 事件侦听器上更新(textarea 是透明的 (background-color: rgba(0,​ 0,​ 0,​ 0)))。如果你在文本区域中添加一些padding-top,这就是它的样子(高亮没有机会更新):

Facebook 的方法实际上非常聪明,当您在文本区域键入内容时,内容会被评估并发送到如下所示的背景元素:

<span class="highlighterContent"><b>#html</b> This is </span>

&lt;b&gt; 元素具有以下 css:

.uiMentionsInput .highlighter b {
    background: linear-gradient(#DCE6F8, #BDCFF1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 2px;
    box-shadow: 0 0 0 1px #A3BCEA;
    font-weight: normal;
}

聪明的事情是文本区域后面的跨度有一个透明字体,因此它与文本区域的不透明字体占用相同的空间(允许&lt;b&gt; 突出显示与文本区域文本保持对齐)。那边的聪明人:)

【讨论】:

  • 哈哈,真的吗?从未知道。我认为这是 contentEditable-magic。我必须对此进行进一步调查。 +1 顺便说一句。
【解决方案2】:

你可以做这样的事情:

http://jsfiddle.net/HR5N8/

<div id="something" contentEditable="true">
    Hi, my name is <span class="name">John</span> and i'm 20 years old!    
</div>

#something{
    width: 400px;
    height: 100px;
    border: 1px solid grey;
}

.name{
     background: #E1EEF5;   
}

【讨论】:

  • 我尝试过这种方式,但使用 div 的问题是我无法为其添加占位符。有什么办法可以添加占位符?
  • 最糟糕的方法...你如何识别每个标签的位置。它应该是相对于内容的宽度。
猜你喜欢
  • 2010-09-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-08
  • 2019-04-19
相关资源
最近更新 更多