热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:文本输入默认值恢复

篇首语:本文由编程笔记#小编为大家整理,主要介绍了文本输入默认值恢复相关的知识,希望对你有一定的参考价值。<p>Thissnippetcouldbe

篇首语:本文由编程笔记#小编为大家整理,主要介绍了文本输入默认值恢复相关的知识,希望对你有一定的参考价值。



This snippet could be used when a text input has a default value. Thus, when user clicks on the input to write, the default value disappears and allows the user to write, but if the user does not type anything, the default value will appears again. It also adds a class to the input when the user is typing on it and is removed when the input loses focus.

This snippet must be inside the ready event.

For the html markup, the only thing to take care is that you must use the same class in all the inputs that you want to give this functionality. In the example I use "input-text-js", but you can use whatever you want.

You can see this snippet working on www.retto.com

  1. var textBoxs = $&#40;'.input-text-js'&#41;;
  2. textBoxs.each&#40;function&#40;&#41; &#123;
  3. var theValue = $&#40;this&#41;.attr&#40;'value'&#41;;
  4. $&#40;this&#41;.focus&#40;function &#40;&#41;&#123;
  5. if&#40;$&#40;this&#41;.attr&#40;'value'&#41; == theValue&#41;&#123;
  6. $&#40;this&#41;.attr&#40;'value',''&#41;.addClass&#40;'writingIt'&#41;;
  7. &#125;
  8. &#125;&#41;.blur&#40;function &#40;&#41; &#123;
  9. if&#40;$&#40;this&#41;.attr&#40;'value'&#41; == ''&#41;&#123;
  10. $&#40;this&#41;.attr&#40;'value',theValue&#41;.removeClass&#40;'writingIt'&#41;;
  11. &#125;
  12. &#125;&#41;;
  13. &#125;&#41;;

推荐阅读
author-avatar
yvli心语
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有