前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分析:input表单输入框默认提示信息

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

作者头像
胡尐睿丶
发布2022-03-23 14:22:14
3K0
发布2022-03-23 14:22:14
举报
文章被收录于专栏:代码小睿代码小睿

  相信上面两张图片上的输入框里有提示信息这功能大家都见过,有的人应该也自己动手做过。

  我之前也做过,做法应该和大家都差不多,在输入框里写入提示内容,当鼠标获取焦点后清空内容,当失去焦点后判断内容是否为空,如果为空,则恢复显示提示内容,反则不显示。但这样的做法是否合理?下面一一来做下分析。

  1、如果输入内容和提示内容完全一样,当失去焦点后,应该如何判断?

  2、如果input在表单里,提交表单后,提示信息随着表单一并提交,难道还要在后端判断提交信息不等于提示信息,再进行数据操作么?

  3、如果1、2两条都触发,后端要如果操作?

  既然这种做法缺点这么多,那怎么做更好呢?其实方法很简单,把提示信息单独写在一个模块里,如div,然后设置这个div的样式,让它浮动到输入框上面,至于js,只需多写一句,当我点击这个div的时候,也触发input框的获取焦点事件即可。

  这样做的好处就是,不仅解决了1、2两点的问题,而且提示内容不局限于文字了,你可以是图片,甚至是flash,大大增强了用户交互。

  简单给段页面代码吧:

代码语言:javascript
复制
<input class="search" type="text" name="search">
<div id="searchtip" style="position:relative;color:#ccc">
   <div style="position:absolute;top:-18px;left:4px">请输入信息</div>
</div>

  附1:这个功能我已经整合在我自己写的插件里,欢迎查看:jquery.HooRay——自己做的一个jquery常用工具插件

  附2:了解HTML5的PLACEHOLDER属性,点击前往

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-04-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档