在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦

可以在文本框属性定义触发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] 鼠标点击文本框清空默认值,离开文本框恢复默认值的更多相关文章

  1. easyui-numberbox后台获取数据后,鼠标一点击就自动清空了

    <input type="text" name="txtMeterInitData" id="txtMeterInitData" cl ...

  2. js鼠标点击特效,有关参数设置

    效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...

  3. js 鼠标点击文本框 提示文字消失

    onfocus="if(this.value==defaultValue) {this.value='';}" onblur="if(!value) {value=def ...

  4. 小程序点击事件改变样式(普通js鼠标点击事件)

    1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...

  5. js鼠标点击版tab切换

    代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...

  6. js 鼠标点击页面出现文字

    <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { ...

  7. [原]创建三个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur

    window.onload = function () {             var txts = document.getElementsByTagName('input');         ...

  8. PHP----练习----光标离开文本框时变色

    题目::创建若干个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色. <!DOCTYPE html PUBLIC "-//W3C//DT ...

  9. 【问题】C4D中设置了界面颜色,如何恢复默认?

    由于C4D没有恢复默认设置的选项,恢复默认的时候比较麻烦,这里简单删除一下配置文件就好了. 1.打开C4D设置,点击下面的[打开配置文件夹],并关掉C4D. (即C:\Users\你的用户名\AppD ...

随机推荐

  1. VC内联汇编和GCC内联汇编的语法区别

    VC: #include <stdio.h> main(){ int a = 1; int b = 2; int c; __asm{ mov eax,a mov ebx,b mov ecx ...

  2. CMDB架构需求实现

    CMDB资产管理部分实现 需求 1.存储所有IT资产信息 2.数据可手动添加 3.硬件信息可自动收集 4.硬件信息可自动变更 5.可对其他系统灵活开放API 6.API接口安全认证 立业之本:定义表结 ...

  3. JAVA笔记17-容器之一 图、Collection接口、Iterator接口(重要)

    掌握1136: (1)1个图 (2)1个类:Collections (3)3个知识点:For(了解),Generic泛型,Auto-boxing/unboxing(自动打包/解包) (4)6个接口:C ...

  4. JAVA中的23种设计模式

    http://blog.csdn.net/chmask/article/details/2631485 http://www.cnblogs.com/hnrainll/archive/2011/12/ ...

  5. 【NOIP2014模拟8.24】小X 的道路修建

    题目 因为一场不小的地震,Y 省n 个城市之间的道路都损坏掉了,省长希望小X 将城市之间的道路重修一遍. 很多城市之间的地基都被地震破坏导致不能修路了,因此可供修建的道路只有m 条.因为施工队伍有限, ...

  6. Hibernate实体对象的生命周期(三种状态)

    瞬时状态(Transient) 通过new创建对象后,对象并没有立刻持久化,它并未与数据库中的数据有任何关联,此时Java对象的状态为瞬时状态. Session对于瞬时状态的Java对象是一无所知的, ...

  7. springboot maven打包插件

    <build> <plugins> <!-- springboot maven打包--> <plugin> <groupId>org.spr ...

  8. aircrack-wifi密码破解

    暴力破解wifi密码尝试 打开网卡监听模式 监听设置结果 扫描wifi 打开网卡监听模式 打开终端,用 airmon-ng 命令查看 root@kali:~/capture# airmon-ng PH ...

  9. 拨号操作——android.intent.action.CALL

    button_14.setOnClickListener(new View.OnClickListener() {          @Override     public void onClick ...

  10. FJWC2017&FJOI2017一试 游记

    day1 ​ 早上是以前泉州七中的杨国烨讲课.(据说当时看新闻说是一对双胞胎一起上thu的其中一个)课题是图论/网络流. ​ 下午第一道一开始推出来了一个之和面积有关的式子,然后觉得可以容斥一发,觉得 ...