分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

js中input文本框设置和移除默认值

发布时间:2023-09-06 02:15责任编辑:赖小花关键词:js

这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。

1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码:

[html] view plain copy
 
  1. <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"  
  2.             onfocus=‘if(this.value=="请输入关键字进行搜索"){this.value="";}; ‘   
  3.             onblur=‘if(this.value==""){this.value="请输入关键字进行搜索";};‘>   

其实onfocus属性挺好用的,还可以在通过onfocus属性改变css样式,如下代码:

[java] view plain copy
 
  1. <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"  
  2.     onfocus=‘if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"‘   
  3.     onblur=‘if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"‘>   

2.也可以使用jquery实现:

[javascript] view plain copy
 
    1. $(document).ready(function() {  
    2.         var vdefault = $(‘#keyword‘).val();  
    3.   
    4.     $(‘#keyword‘).focus(function() {  
    5.             //获得焦点时,如果值为默认值,则设置为空  
    6.             if ($(this).val() == vdefault) {  
    7.                 $(this).val("");  
    8.             }  
    9.         });  
    10.     $(‘#keyword‘).blur(function() {  
    11.             //失去焦点时,如果值为空,则设置为默认值  
    12.             if ($(this).val()== "") {  
    13.                 $(this).val(vdefault); ;  
    14.             }  
    15.         });  
    16. });  

js中input文本框设置和移除默认值

原文地址:https://www.cnblogs.com/ltb6w/p/9657866.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved