我们经常在qq聊天输入框或者其他一些网站的多行文字输入框看到这样的效果。当我们输入@符号后，相关的初步输入内容会在后面弹出。
@输入提示效果图
我们来看看具体的代码实现部分:
HTML部分很简单，就是一个提交按钮，一个多行文本框，一个需要隐藏和显示的预输入内容列表。id为hackDiv的元素用于确定输入文本的结束位置。
HTML部分代码
css part将文本框和提交按钮放在浏览器窗口的中央，并将所有涉及的标签放在文档中。可以看到，textarea元素和id为hackDiv的元素具有相同的占位符元素，id为hackDiv的元素紧跟在textarea元素之后。
Css部分代码
JavaScript代码相对复杂。首先，使用兼容的函数来支持IE事件绑定。其次，建立两个帮助函数来设置预输入文本的位置和显示方式，从而获得预输入文本的输入位置。最后，要传入的@ name的值被写入文本框，光标位置被设置为文本的结束位置。
用函数实现ie对事件绑定的兼容
两个辅助功能
调用函数实现完整的逻辑。
本文来自女人u加油投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/561781.html
微信扫一扫 
