[JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值
在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦
可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能
下面以asp.net代码为例
文本框控件的设置:
属性内设定好onfocus和onblur即可
参数1传递的是控件本身,参数2传的是控件的默认text值
<asp:TextBox ID="Material_No" onfocus="onFocusFun(this,'請輸入料號')" onblur="onblurFun(this,'請輸入料號')" runat="server" AutoPostBack="True">請輸入料號</asp:TextBox>
js代码实现:
若用户没有输入任何东西,取消选择时恢复的默认值字体颜色会变红色(具体颜色可自行调整)
//點擊輸入框時清空默認內容 function onFocusFun(element, elementValue) { if (element.value == elementValue) { element.value = ""; element.style.color = ""; } } //離開輸入框時,若輸入為空 恢復默認內容 function onblurFun(element, elementValue) { if (element.value == '') { element.style.color = "#F40"; element.value = elementValue; } }
效果:
1.默认状态
2.选择状态
3.输入为空,恢复状态
[JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值的更多相关文章
- easyui-numberbox后台获取数据后,鼠标一点击就自动清空了
<input type="text" name="txtMeterInitData" id="txtMeterInitData" cl ...
- js鼠标点击特效,有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...
- js 鼠标点击文本框 提示文字消失
onfocus="if(this.value==defaultValue) {this.value='';}" onblur="if(!value) {value=def ...
- 小程序点击事件改变样式(普通js鼠标点击事件)
1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...
- js鼠标点击版tab切换
代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...
- js 鼠标点击页面出现文字
<script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { ...
- [原]创建三个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur
window.onload = function () { var txts = document.getElementsByTagName('input'); ...
- PHP----练习----光标离开文本框时变色
题目::创建若干个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色. <!DOCTYPE html PUBLIC "-//W3C//DT ...
- 【问题】C4D中设置了界面颜色,如何恢复默认?
由于C4D没有恢复默认设置的选项,恢复默认的时候比较麻烦,这里简单删除一下配置文件就好了. 1.打开C4D设置,点击下面的[打开配置文件夹],并关掉C4D. (即C:\Users\你的用户名\AppD ...
随机推荐
- VC内联汇编和GCC内联汇编的语法区别
VC: #include <stdio.h> main(){ int a = 1; int b = 2; int c; __asm{ mov eax,a mov ebx,b mov ecx ...
- CMDB架构需求实现
CMDB资产管理部分实现 需求 1.存储所有IT资产信息 2.数据可手动添加 3.硬件信息可自动收集 4.硬件信息可自动变更 5.可对其他系统灵活开放API 6.API接口安全认证 立业之本:定义表结 ...
- JAVA笔记17-容器之一 图、Collection接口、Iterator接口(重要)
掌握1136: (1)1个图 (2)1个类:Collections (3)3个知识点:For(了解),Generic泛型,Auto-boxing/unboxing(自动打包/解包) (4)6个接口:C ...
- JAVA中的23种设计模式
http://blog.csdn.net/chmask/article/details/2631485 http://www.cnblogs.com/hnrainll/archive/2011/12/ ...
- 【NOIP2014模拟8.24】小X 的道路修建
题目 因为一场不小的地震,Y 省n 个城市之间的道路都损坏掉了,省长希望小X 将城市之间的道路重修一遍. 很多城市之间的地基都被地震破坏导致不能修路了,因此可供修建的道路只有m 条.因为施工队伍有限, ...
- Hibernate实体对象的生命周期(三种状态)
瞬时状态(Transient) 通过new创建对象后,对象并没有立刻持久化,它并未与数据库中的数据有任何关联,此时Java对象的状态为瞬时状态. Session对于瞬时状态的Java对象是一无所知的, ...
- springboot maven打包插件
<build> <plugins> <!-- springboot maven打包--> <plugin> <groupId>org.spr ...
- aircrack-wifi密码破解
暴力破解wifi密码尝试 打开网卡监听模式 监听设置结果 扫描wifi 打开网卡监听模式 打开终端,用 airmon-ng 命令查看 root@kali:~/capture# airmon-ng PH ...
- 拨号操作——android.intent.action.CALL
button_14.setOnClickListener(new View.OnClickListener() { @Override public void onClick ...
- FJWC2017&FJOI2017一试 游记
day1 早上是以前泉州七中的杨国烨讲课.(据说当时看新闻说是一对双胞胎一起上thu的其中一个)课题是图论/网络流. 下午第一道一开始推出来了一个之和面积有关的式子,然后觉得可以容斥一发,觉得 ...