小樱知识 > 生活常识textarea默认显示文字内容（ttextarea的value值设置方法）

textarea默认显示文字内容（ttextarea的value值设置方法）

提问时间：2022-03-16 12:09:43来源：小樱知识网

我们在qq聊天输入框，或者其他一些网站的多行文本输入框中常常会见到这样一种效果，当我们输入@符号后，后面会弹出相关的预备输入内容。

@输入提示效果图

我们来看看具体的代码实现部分：

HTML部分很简单，就是一个提交按钮和一个多行文本框，还有需要隐藏显示的预输入内容列表。其中id为hackDiv的元素用于确定输入文本的末尾位置。

HTML部分代码

css部分实现了将一个文本框和提交按钮放在浏览器窗口居中位置，并将所有涉及的标签放在了文档中。可以看到textarea元素和id为hackDiv的元素具有相同的占位元素，id为hackDiv的元素紧跟在textarea元素后。

css部分代码

JavaScript部分代码就会相对复杂一些，首先通过一个兼容函数实现对IE事件绑定的支持，其次建立两个帮助函数，设置预输入文本的位置和显示方式，获取预输入文本的输入位置，最后将@需要传入的name值写入文本框，并设置光标的位置为文本结束位置。

用函数实现ie对事件绑定的兼容

两个辅助函数

调用函数实现完整逻辑

以上内容就是为大家推荐的textarea默认显示文字内容（ttextarea的value值设置方法）最佳回答，如果还想搜索其他问题，请收藏本网站或点击搜索更多问题

内容来源于网络仅供参考
二维码

扫一扫关注我们

版权声明：所有来源标注为小樱知识网www.xiaoyin02.com的内容版权均为本站所有，若您需要引用、转载，只需要注明来源及原文链接即可。

本文标题：textarea默认显示文字内容（ttextarea的value值设置方法）

本文地址：https://www.xiaoyin02.com/shcs/116336.html

上一篇：win10系统迁移到固态硬盘方法（x270加装固态硬盘教程）

下一篇：app启动页面制作（android个人信息界面设计详解）

相关文章

|网站首页| 生活常识| 家务日常| 自然科学| 数码解读| 运动有氧| 家庭美食| 恋爱情感| 常见问题| 生肖运势|

本网站属于科学类内容，传达严谨、科学的内容，专门聚焦于生活中的常识误区为大家解决常识问题

Copyright © 2022 小桜知识网 版权所有 京ICP备2021039702号-11

中国互联网诚信示范企业违法和不良信息举报中心网络110报警服务中国互联网协会中国互联网协会信用评价中心诚信网站