【转】input标签获取焦点时文本框内提示信息清空

news/2024/7/5 15:29:02

作用是,一个文本框,需要输入内容,在没有输入的时候里面有一段提示内容,当点击这个文本框输入的时候,文本框内的内容自动消失。挺简单的一个功能,但是没有想到实现起来还是很麻烦的,在网上找了一段代码,贴上来以备后用。

给文本框添加触发事件onfocus和onblur,调用函数处理。完整代码:

<script> function cls(){ //捕获触发事件的对象,并设置为以下语句的默认对象 with(event.srcElement) //如果当前值为默认值,则清空 if(value==defaultValue) value="" } function res(){ //捕获触发事件的对象,并设置为以下语句的默认对象 with(event.srcElement) //如果当前值为空,则重置为默认值 if(value=="") value=defaultValue } </script> <input value="填写您的昵称" οnfοcus="cls()" οnblur="res()"> <input value="填写您的生日(1900-01-01)" οnfοcus="cls()" οnblur="res()">

  注意:本例的方法对大部分表单控件都有效,比如多行文本框。

  特别提示:运行完整代码,在鼠标第一次单击文本框时该文本框内容将被清空,在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值,将不再有任何变化。

============================================================================================

<input type="text"                  id="text"                  name="text"                  value="默认显示文字"                  οnfοcus="if(value == defaultValue){value='';this.style.color='#000'}"                  οnblur="if(!value){value = defaultValue;this.style.color='#999'}"                  style="width:200px;color:#999999" />

转载于:https://www.cnblogs.com/lzhitian/archive/2013/03/17/2964516.html


http://www.niftyadmin.cn/n/1595515.html

相关文章

公共基础复习总结(不断更新中...)

一、数学 1、向量代数的考点 &#xff08;1&#xff09;向量的数量积和向量积及其乘法规律&#xff1b;&#xff08;2&#xff09;两向量&#xff0c;或者三向量平行/垂直/共面的条件。转载于:https://www.cnblogs.com/xiaqs/archive/2013/03/17/2964557.html

yum仓库的使用

yum的目的是为了解决RPM依赖关系的问题&#xff0c;方便使用者进行软件的安装、升级等工作。RHEL5中默认提供了对YUM的支持。yum的基本工作流程&#xff1a;服务器端&#xff1a;在服务器上面存放了所有的RPM软件包&#xff0c;然后通过命令分析每个RPM文件的依赖性&#xff0c…

CSS实现省略号

省略号作用 在制作网页的时候&#xff0c;经常会遇到文字内容太多超出部分省略的情况。例如&#xff1a; 我们可以把这个类设置在公共样式里&#xff0c;需要的时候随时调用。 实现方法 .omit {width: 185px;/* 省略号的设置 前提&#xff1a;文本父级要有宽度 */white-spa…

Java Jdbc减少与Oracle之间交互提升批量处理性能,到底该如何优化才好?

不拾掇Java有好几年了(N>3吧)&#xff0c;之所以写这篇文章其实是纯粹是为了给开发人员一些好的使用jdbc真正去减少交互和提升批量处理batch update性能的例子&#xff1b; 如果你是DBA&#xff0c;那么工作之余你可以把这篇文章推荐给开发看一下&#xff0c; 也许这些例子…

JS基础(二)

程序三大流程控制语句 顺序结构 从上往下执行 分支结构 根据条件选择执行 循环结构 某段代码重复执行 分支语句 if分支语句 单分支 语法&#xff1a; if&#xff08;条件&#xff09; {满足条件要执行的代码 }当条件为true&#xff0c;代码会执行若条件结果不是布尔…

移动适配-rem

rem 认识 优点&#xff1a; 可以适应不同大小的屏幕 使用px或者百分比布局不能实现&#xff1a; px单位时绝对单位百分比布局是宽度自适应&#xff0c;高度固定的 rem使用 rem使用时需要配合: 媒体查询flexible.js(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字…

说说IUnitOfWork~方法完整性与统一提交不冲突

回到目录 第一讲 认识IUnitOfWork&#xff0c;为什么要出现IUnitOfWork接口第二讲 Linq to Sql与EntityFrameworks中的SubmtChanges()发生了什么事第三讲 方法完整性与统一提交不冲突第四讲 DbContext对象的创建应该向BLL层公开第五讲 我的IUnitOfWorkRepository架构在一个方法…

CSS预处理器-Less

less 认识 Less是一个 CSS预处理器&#xff0c; Less文件后缀为.less浏览器不识别less文件&#xff0c;所以在VScode里使用Easy Less插件自动生成css文件 优点&#xff1a; css逻辑更加清晰免去了繁琐的计算&#xff08;直接写计算式就可&#xff09; 注释 // 单行注释 C…