zoukankan      html  css  js  c++  java
  • 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节。比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐藏。今天在这里,想跟大家分享一下这个小技巧,希望各位大神不要拍砖哦~~~ 
    一、要求 
    input输入框,在光标显示时,隐藏提示信息;光标离开输入框时,显示提示信息。 
    二、方法 
    1、给该input取id名,Onfocus=”方法名1(this)”,onblur=”方法名2(this)” 
    2、声明变量value,通过id名获得该input 

    3、function 方法名1(inputObj){ 

    if(inputObj.value==”……”){ 
    
    inputObj.value=””; 
    
    } 
    
    } 
    

    4、function 方法名2(inputObj){ 

    if(inputObj.value==””){ 
    
    inputObj.value=”……”; 
    
    } 
    
    } 
    

    5、注意:如果同一个页面中有多个input标签需要同样的设置,则方法名不能一致。 
    三、实例 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题文档</title> 
    <link href="file:///E|/做过的网站/midi/css/index.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript"> 
    var value=document.getElementById('shuru'); 
    function qingkong(inputObj){ 
    if(inputObj.value=="请输入您的姓名"){ 
    inputObj.value=""; 
    } 
    } 
    function likai(inputObj){ 
    if(inputObj.value==''){ 
    inputObj.value="请输入您的姓名"; 
    } 
    } 
    
    </script> 
    <style type="text/css"> 
    /*下面这段文字,可以在ie浏览器中改变输入框的背景颜色*/ 
    .search input{star : expression(onmouseover=function(){ 
    this.style.backgroundColor="#FF0000" 
    }, 
    onmouseout=function(){ 
    this.style.backgroundColor="#FFFFFF" 
    }) 
    } 
    </style> 
    </head> 
    <body> 
    <input type="text" id="shuru" value="请输入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/> 
    </body> 
    </html> 
    
  • 相关阅读:
    检查两个单链表是否有交点
    检查链表中是否有环
    [转]根据二叉树的先序、中序遍历结果重建二叉树
    背包问题
    硬币问题
    部分和问题
    斐波那契计算
    最大公因数和最小共倍数
    计算一年中的第几天
    利用递归反向输出字符串
  • 原文地址:https://www.cnblogs.com/gxbk629/p/5039111.html
Copyright © 2011-2022 走看看