热门标签 | 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;;

推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文探讨了在不使用服务器控件的情况下,如何通过多种方法获取并修改页面中的HTML元素值。除了常见的AJAX方式,还介绍了其他可行的技术方案。 ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • 本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法,通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点,并保持在文档树中。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
  • andr ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 在维护公司项目时,发现按下手机的某个物理按键后会激活相应的服务,并在屏幕上模拟点击特定坐标点。本文详细介绍了如何使用ADB Shell Input命令来模拟各种输入事件,包括滑动、按键和点击等。 ... [详细]
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社区 版权所有