首页
学习
活动
专区
工具
TVP
发布

利用placeholder属性来添加输入框默认文字提示,提高用户体验

一、JS 控制默认文字 先说一下问题: 用 HotNewspro 主题的网站,默认的留言输入框是这样的: ? 常规情况下,光标聚焦留言输入框,这个预设提示文字是会自动消失的: ?...但是,如果你在没输入文字之前,点击插入表情,就成这样了: ? 也就是说,这个预设提示文字它不会自动消失了!...鼠标 onclick 点击时,判断输入框是不是初始的【默认提示文字】,如果是就清空; b. 鼠标光标离开输入框时,判断输入框里面是否为空,如果为空就自动填入【默认提示文字】。...不过在上文插入表情的那种情境下,就出问题了:点击插入表情时,并没有对输入框触发 onclick 动作,于是默认文字并未清空就填入表情了,然后就算鼠标离开输入框,由于默认文字发生改变,也就不会自动清空了!...当然,针对上文问题情境,完全可以通过给【点击表情这个动作】绑定一个清空预设文字功能,点击表情时先判断输入框是否是【默认提示文字】,如果是就先清空,然后在插入表情,从而解决问题。

3.5K90
您找到你想要的搜索结果了吗?
是的
没有找到

给input填充提示文字

很多时候我们发现input输入框里有提示文字,当我们输入内容后,提示文字消失,不输入内容,提示文字出现,这里我来介绍两种方式来实现。...第一种方式是通过js的方式来实现,首先我们从input的获取焦点和失去焦点两个事件,预先将提示文字写在input的value值里,例如,...这样我们在看到的效果里就会是文本框里有我是提示文字文字了,当我们点击文本框即文本框获取到了焦点,这时将value的值设置为空,例如: function removeWenzi(){ $("#inp...").val(""); } 这时给input添加onfocus事件,例如这样我们点击文本框的时候文字就会消失...()" value="我是提示文字" /> 第二种方法就是直接给input添加placeholder,例如即可,效果和上面的那种方法大体相同。

2.1K20

分析:input表单输入框默认提示信息

相信上面两张图片上的输入框里有提示信息这功能大家都见过,有的人应该也自己动手做过。   ...我之前也做过,做法应该和大家都差不多,在输入框里写入提示内容,当鼠标获取焦点后清空内容,当失去焦点后判断内容是否为空,如果为空,则恢复显示提示内容,反则不显示。但这样的做法是否合理?...2、如果input在表单里,提交表单后,提示信息随着表单一并提交,难道还要在后端判断提交信息不等于提示信息,再进行数据操作么?   3、如果1、2两条都触发,后端要如果操作?   ...其实方法很简单,把提示信息单独写在一个模块里,如div,然后设置这个div的样式,让它浮动到输入框上面,至于js,只需多写一句,当我点击这个div的时候,也触发input框的获取焦点事件即可。   ...这样做的好处就是,不仅解决了1、2两点的问题,而且提示内容不局限于文字了,你可以是图片,甚至是flash,大大增强了用户交互。

2.9K50
领券