精华内容
下载资源
问答
  • JS显示隐藏文本框内容

    千次阅读 2020-08-21 23:47:27
    问题: 当鼠标点击文本框时,里面的默认文章隐藏,当鼠标...代码: <!... <... ...显示隐藏文本框内容</title> </head> <body> <input type="text" name="" id="" value="手机" /> &l

    问题:

    当鼠标点击文本框时,里面的默认文章隐藏,当鼠标离开文本框时,里面的文字显示

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>显示隐藏文本框内容</title>
    	</head>
    	<body>
    		<input type="text" name="" id="" value="手机" />
    		
    		<script type="text/javascript">
    			var text = document.querySelector("input");
    			
    			//获得焦点
    			text.onfocus = function(){
    				if(this.value == "手机"){
    					this.value = "";
    				}
    			}
    			
    			//失去焦点
    			text.onblur = function(){
    				if(this.value == ""){
    					this.value = "手机";
    				}
    			}
    		</script>
    	</body>
    </html>
    
    

    运行结果:

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • } // 获得焦点需要把文本框里面的文字颜色变黑 this.style.color = '#333'; } // 3. 注册事件 失去焦点事件 onblur text.onblur = function() { // console.log('失去了焦点'); if (this.value === '') { this....
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            input {
                color: #999;
            }
        </style>
    </head>
    
    <body>
        <input type="text" value="手机">
        <script>
            // 1.获取元素
            var text = document.querySelector('input');
            // 2.注册事件 获得焦点事件 onfocus 
            text.onfocus = function() {
                    // console.log('得到了焦点');
                    if (this.value === '手机') {
                        this.value = '';
                    }
                    // 获得焦点需要把文本框里面的文字颜色变黑
                    this.style.color = '#333';
                }
                // 3. 注册事件 失去焦点事件 onblur
            text.onblur = function() {
                // console.log('失去了焦点');
                if (this.value === '') {
                    this.value = '手机';
                }
                // 失去焦点需要把文本框里面的文字颜色变浅色
                this.style.color = '#999';
            }
        </script>
    
    </body>
    
    </html>
    
    展开全文
  • 描述 当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。 分析 ①首先表单需要2个新事件,获得焦点 onfocus 失去焦点 onblur ② 如果获得焦点, 判断表单里面内容是否为默认文字,如果...

    描述 当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。
    分析
    ①首先表单需要2个新事件,获得焦点 onfocus 失去焦点 onblur
    ② 如果获得焦点, 判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容
    ③ 如果失去焦点, 判断表单内容是否为空,如果为空,则表单内容改为默认文字

    <script>
            var text = document.querySelector('input');      
            text.onfocus = function() {         
                  if (this.value == "手机") {              
                   this.value = "";           
                   }           
                   this.style.color = '#333';       
            }       
             text.onblur = function() {          
                     if (this.value == "") {              
                     this.value = "手机";        
                     }            
                     this.style.color = '#999';      
                }
    </script>
            
      
    
    展开全文
  • 显示隐藏文本框内容

    2021-01-16 21:06:11
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... input {
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        input {
            color: #999;
        }
    </style>
    <body>
        <input type="text" value="手机"/>
        
        <script>
            var text = document.querySelector('input');
            //获得焦点事件 onfocus
            text.onfocus = function() {
                  if(this.value === '手机') {
                           this.value = '';
                  }
                  //输入文字颜色变深
                  this.style.color = 'black';
            }
            //失去焦点 onblur
            text.onblur = function() {
                if(this.value === '') {
                    this.value = '手机';
                    this.style.color = '#999';
                }
            
    
            }
        </script>
    </body>
    </html>
    
    展开全文
  • 关于文本框的一些简单操作 获得焦点的时候,text的value默认为空,然后输入我们想要的值;失去焦点的时候再显示原来的value值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • 代码: <body> <input type="text" value="哈哈"> <script> var text=document.querySelector('input'); text.onfocus=function(){ if (text.value=='哈哈'){ text.value=' ';... &
  • 1. 显示隐藏文本框内容 任务描述: 参考代码
  • js显示隐藏文本框

    2021-10-01 07:47:25
    默认会显示这个,当鼠标放在文本框区点击时: ‘电脑’隐藏,返回焦点后再次出现: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • js 单击显示隐藏文本框(datatables)

    千次阅读 2018-08-30 17:06:02
    前端html代码: 是 否 ...js代码: ... $(document).ready(function () { ... document.getElementById(“text”).style.visibility=”hidden”;...//实现单击选择:显示隐藏文本框 ...
  • 显示隐藏文本框内容 获得焦点onfocus 失去焦点onblur <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...titl...
  • <!... <... ...显示隐藏文本框内容</title> <style> input{ color:#999; } </style> </head> <body> <input type="text" value="手机"> <s.
  • 案例_显示隐藏文本框内容 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=...
  • 分析:在我们打开百度、京东等时,会发现这样一个现象:它们的搜索框内有文字,但是当我们的光标在搜索框内时,搜索框内的内容会消失,当光标离开且搜索框内为空时,默认内容又会显示出来。 想实现这个功能,我们要...
  • 使用Jquery定时实现显示隐藏,并且自动填充,,判断显示隐藏文本框,小功能凑字数凑字数凑字数凑字数凑字数
  • 我们做搜索框的时候,经常需要这样一个效果:搜索框默认显示一段提示文本,比如“输入关键词”,鼠标点击后,清空这段文本。鼠标再次点击别的地方,又要恢复这段文本
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input{ color: #999999; } </style>...strong&
  • 效果展示: 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>...input type="text" value="手机">.
  • 四、显示隐藏文本框内容 思路: ① 首先表单需要2个新事件,获得焦点onfocus失去焦点onblur ② 如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容。 ③如果失去焦点,判断表单内容是否为...
  • <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30...
  • 用bootstrap-show-password.js插件实现纯js的input框显示隐藏密码的功能
  • 当单击文本框时,里面的默认提示文字会隐藏,鼠标指针离开文本框,里面的文字会显示出来。 效果图如下: 当未单击文本框时: 当单击文本框时: html页面中代码如下: <input type="text" id="userName" value=...
  • 新增弹窗:这里需要根据所选的“供方类别”来判断是否隐藏“工号”的文本框。 <div align="center" style=" display:none; " id="divnew"> <table style="border: 1px solid #7DBEFF"> <tr&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,601
精华内容 10,240
关键字:

显示隐藏文本框内容js