var placeholderfriend = { focus: function.prev; var idValue = s.attr {
s.attr(“id”, idValue.replace(“placeholderfriend”, “”)); } var clsValue =
s.attr; if { s.attr(“class”, clsValue.replace(“placeholderfriend”, “”));
} } }

先来看javascript的一贯写在了input上

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html;
charsetGB2312″ />
        <title>文本框点击时文字消失,失去核心时文字出现</title>
        
    </head>
    <body>
        <input type=”text” value=”请输入您的真名” id=”myinput”
/>
    </body>
</html>
<script language=”JavaScript” type=”text/javascript”>
            function addListener(element,e,fn)
   {
     if(element.addEventListener)
     {
              element.addEventListener(e,fn,false);
                 }
     else
     {
               element.attachEvent(“on” + e,fn);
        }
            }
            var myinput = document.getElementById(“myinput”);
            addListener(myinput,”click”,function(){
                myinput.value = “”;
            })
            addListener(myinput,”blur”,function(){
                myinput.value = “请输入您的真名1 “;
            })

elements.focus { var s = $; var pValue = s.attr;var sValue = s.val(); if
{ if { s.val;

<input type=”text” value=”” title=”请输入内容” />

复制代码 代码如下: { /** *
未有开放的树 * 2012/11/28 15:12 */

下边是三个简便的例证:

复制代码

//判别是不是援助placeholder function isPlaceholer(卡塔尔(قطر‎ { var input =
document.createElement; return “placeholder” in input; } //不协助的代码
if { $ {

jquery代码

复制代码

}); } window.placeholderfriendfocus = placeholderfriend.focus;});

复制代码 代码如下:

</script>

var form = $;

复制代码 代码如下:

</body>
</html>

//遍历全部密码框,增加placeholder模拟事件 var elementsPass =
form.find(“input[type=’password’][placeholder]”卡塔尔(英语:State of Qatar); elementsPass.each
{ var s = $; var pValue = s.attr;var sValue = s.val { if {
//DOM不补助type的改造,须要复制密码框属性,生成新的DOM var html =
this.outerHTML || “”; html = html.replace?password\1/gi, ” type=text
placeholderfriend”) .replace(/\s*(?:value|on[a-z]+|name)?/gi, ” “)
.replace(/\s*placeholderfriend/, ” placeholderfriend value='” + pValue

复制代码 代码如下:

 代码如下

//遍历全数文本框,增加placeholder模拟事件 var elements =
form.find(“input[type=’text’][placeholder]”); elements.each { var s
= $; var pValue = s.attr;var sValue = s.val { if { s.val;

文本框获得大旨、失去主题调用JavaScript

我们日常拜看见有个别网址像注册要填表单的都会意气风发种正是文本框有一点羊时文本框提醒消失,如若大家离开时文本西式文件提示就出来了,上面笔者来给大家介绍一些左近的代码。

  • “‘ ” + “onfocus=’placeholderfriendfocus; var idValue = s.attr {
    s.attr(“id”, idValue + “placeholderfriend”); } var clsValue = s.attr;if
    { s.attr(“class”, clsValue + “placeholderfriend”); } s.hide; } } });

第二种: jQuery

方法一,直接在input中直接

复制代码 代码如下:

</script>
<body>
<form name=”form1″>
客户名:<input type=”text” id=”text1″ value=”请输入客户名”
onfocus=”javascript:document.form1.text1.value=”” onblur=”tt(卡塔尔(قطر‎”/>
<span id=”s1″></span><br />
密码:<input type=”text” id=”text2″ value=”请输入密码”
onfocus=”javascript:document.form1.text2.value=”” onblur=”a(卡塔尔(قطر‎”/>
<span id=”s2″></span><br />
<input type=”button” id=”button” value=”登陆” />
</form>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>jquery文本框暗许文字点击消失的机能</title>
<script src=”jquery.min.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
   $(“#focus .input_txt”).each(function(){
     var thisVal=$(this).val();
     //剖断文本框的值是还是不是为空,有值的情事就掩盖提示语,未有值就彰显
     if(thisVal!=””){
       $(this).siblings(“#focus label”).hide();
      }else{
       $(this).siblings(“#focus label”).show();
      }
     //集中型输入框验证
     $(this).focus(function(){
       $(this).siblings(“#focus label”).hide();
      }).blur(function(){
        var val=$(this).val();
        if(val!=””){
         $(this).siblings(“#focus label”).hide();
        }else{
         $(this).siblings(“#focus label”).show();
        }
      });
    })
    $(“#keydown .input_txt”).each(function(){
     var thisVal=$(this).val();
     //判定文本框的值是还是不是为空,有值的动静就隐瞒提醒语,未有值就显得
     if(thisVal!=””){
       $(this).siblings(“#keydown label”).hide();
      }else{
       $(this).siblings(“#keydown label”).show();
      }
      $(this).keyup(function(){
       var val=$(this).val();
       $(this).siblings(“#keydown label”).hide();
      }).blur(function(){
        var val=$(this).val();
        if(val!=””){
         $(this).siblings(“#keydown label”).hide();
        }else{
         $(this).siblings(“#keydown label”).show();
        }
       })
     })
  })
</script>
<style type=”text/css”>
form { width:400px; margin:10px auto; border:solid 1px #E0DEDE;
background:#FCF9EF; padding:20px; box-shadow:0 1px 10px rgba(0, 0, 0,
0.1) inset;font-family:Arial; }
.tonjay { display:block; height:40px; position:relative; margin:20px 0;
}
#focus label,#keydown label { position:absolute; line-height:40px;
left:10px; top:0; color:#ccc; cursor:text; background:none;}
.input_txt { width:398px; border:solid 1px #ccc; box-shadow:0 1px 10px
rgba(0, 0, 0, 0.1) inset; height:38px; line-height:38px;
padding-left:10px;}
.input_txt:focus { box-shadow:0 0 4px rgba(255, 153, 164, 0.8);
border:solid 1px #B00000; }
.border_radius { border-radius:5px; color:#B00000; }
h2 { font-family:”微软雅黑”; text-shadow:1px 1px 3px #fff; padding:0;
margin:0;}
</style>
</head>
<body>
<form class=”border_radius” id=”focus”>
  <h2>集中型提醒语消失</h2>
  <div class=”tonjay”>
    <input type=”text” class=”input_txt border_radius” id=”Input” 
/><label for=”Input”>js特效大全网注册 </label>
  </div>
  <div class=”tonjay”>
    <input type=”text” class=”input_txt border_radius” id=”Input2″
/><label for=”Input2″>输入顾客名</label>
  </div>
</form>
<form class=”border_radius” id=”keydown”>
  <h2>输入型提示语消失</h2>
  <div class=”tonjay”>
    <input type=”text” class=”input_txt border_radius” id=”Input3″
/><label for=”Input3″>js特效大全网注册 </label>
  </div>
  <div class=”tonjay”>
    <input type=”text” class=”input_txt border_radius”
id=”Input4″/><label for=”Input4″>输入客商名</label>
  </div>
</form>

比较久从前写了那个插件,基于jQuery达成的,主要用来IE下促成placeholder效果,可同一时候扶植文件和密码输入框。

复制代码 代码如下:

方法三,利用jquery实现

下载地址:

复制代码 代码如下:

 代码如下

placeholder是HTML5新扩大的三个属性,当input设置了该属性后,该值的内容将用作浅金棕提醒呈现在文本框中,当文本框获得宗旨时,提醒文字消失。

原理:让表单的val值等于其title值。
代码如下:

<input type=”text” onfocus=”if(this.value==’指中本人看看哪些效果’卡塔尔国this.value=”;” onblur=”if(this.value==”卡塔尔(قطر‎this.value=’指中自己看看怎么着效果与利益’;” value=”指中小编看看哪些意义”
style=”color:#666″ size=”6″ id=”s_name” name=”s_name”>

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注