我想使用jQuery创建一个类似于facebook状态更新的系统。
如果你看一下它的核心,在What's on your mind?
textarea标签下面的几个元素,有一个隐藏的字段…
<input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="">
当您在textarea字段中键入状态时,此隐藏字段的值将更改以匹配该状态。但是,如果您将某人标记到状态中,则隐藏字段将显示类似@[uid:User Name]
的内容来代替用户名,以便稍后将其转换为超链接。
我自己也试过创建类似的东西,不是用用户,而是用标签。http://jsfiddle.net/nickjackson/qh3QP/
当我在第一个文本区域字段中输入#fun
时,第二个文本区域显示#[tag:fun]
, #fun
标记变为fun
。这些都是正确的。但是,当我输入其他内容时,方括号消失了,因为#标签不再在状态字段中。我怎么解决这个问题?
最后,我如何创建一个文本区和隐藏字段组合,其工作原理类似于facebook状态更新,并允许使用标签?
我使用了3个字段—一个用于输入,一个用于存储tag
内容,另一个用于显示文本。输入字段是不可见的,但位于显示字段的顶部。这应该是不言自明的,但问任何问题,你可能有-不,我没有快速的解决方案,没有光标。
正如Henry Garle所说,您不能在hidden-field
中同时拥有多个编码标记(除非您在status-field
中粘贴包含多个标记的文本),因为代码需要在status-field
中找到标记,以便在hidden-field
中创建它们的编码版本。由于在此之后它只保留status-field
中标记的值,因此下次代码运行时(在按键事件之后),它将所述值视为常规文本,并将其简单地复制到hidden-field
中,因为它无法将它们识别为标记的值。
修复很简单:因为一次只能创建一个标记,所以您所要做的就是修改代码,仅针对status-field
中第一个出现的标记。由于没有其他标记作为目标,它们在hidden-field
中的编码版本将被保留。
mentiator是一个现有的、健壮的解决方案,它采用了提供您试图重新创建的功能的方法。考虑到它结构良好,易于遵循,并且有大量的评论,它应该对你有用,作为开箱即用的解决方案或参考材料,当你推出自己的。