一个友好的文本框内显示提示语

 联系我们     |      2019-11-26 14:10

一个友好的文本框内显示提示语 jquery 插件,文本框jquery

插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失。 如果没有输入或输入为空则失去焦点时提示语再次出现。
同时它的使用非常舒适简单,引入插件及 jquery 后,在原有的文本框内加上样式类(class="prompt-input")以及设置值(value="Your prompt")为提示语就可以了。

像这样:

1 <input class="prompt-input" type="text" value='Your prompt' />

同时获取值的方式无需任何更改,这样在已完成的项目上加上插件效果也没有任何改动上的压力了。

实现 js:

图片 1 1 /* 2 * 3 * Version: 1.2.0 4 * Author: jinglan.woo(a)gmail.com 5 * Date: 2014.08.07 6 * 7 * Friendly prompt text input box: 8 * the text input box has focus prompt disappears 9 * and prompt appears again when it out of focus 10 * 11 */ 12 13 (function ($) { 14 $.fn.promptInput = function (prompt, fontColor) { 15 var $this = $(this); //当前传入文本框 16 prompt = prompt ? prompt : $this.val(); //在输入框中显示的提示语 17 fontColor = fontColor ? fontColor : '#ccc'; //提示语的颜色 18 19 var $promptInput = $this.clone(); //克隆传入的文本框,用于展示 20 21 $promptInput.addClass('prompt-input').css('color', fontColor) 22 .attr('prompt', prompt).attr('type','text').removeAttr('name').removeAttr('id') 23 .val(prompt); //实例化用于展示的文本框 24 25 $promptInput 26 .focusin(function () { //获取焦点时去掉提示 27 $(this).css('color', ''); 28 if ($(this).val() == $(this).attr('prompt')) { 29 $(this).val(''); 30 } 31 }) 32 .focusout(function () { //失去焦点时显示提示 33 if ($(this).val().replace(/s/g, '') == '') { 34 $(this).val($(this).attr('prompt')).css('color', fontColor); 35 $(this).next().val(''); 36 } 37 }).change(function () { //值发生改变时,同时为当前传入文本框赋值 38 $(this).next().val($(this).val()); 39 }); 40 41 $this.attr('type', 'hidden').val(''); //改变当前传入文本框类型为隐藏域 42 $promptInput.insertBefore($this); //同时追加克隆体到页面 43 }; 44 })(jQuery); 45 46 $(function () { 47 $('.prompt-input').each(function (index, element) { //页面加载完成自动检测 .prompt-input 类,加载效果 48 $(element).promptInput(); 49 }); 50 }); jquery.promptInput.js

使用 html:

 1 <!DOCTYPE html>
 2 <head>
 3     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 4     <script src="jquery.promptInput.js"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             $('#signUp').click(function () {
 8                 alert('username: ' + $('#username').val());
 9             });
10         });
11     </script>
12 </head>
13 <body>
14         <input class="prompt-input" type="text" value="请输入用户名" id="username" />
15         <div id="signUp">Sign up</div>
16 </body>
17 </html>

 可以复制以上代码直接运行,也可以在这里下载完整代码及演示。

 

IE下支持文本框和密码框placeholder效果的JQuery插件分享,

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框。

placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失。

下载地址:

实现代码如下:

复制代码 代码如下:

(function($) {
  /**
   * 没有开花的树
   * 2012/11/28 15:12
   */

  var placeholderfriend = {
    focus: function(s) {
      s = $(s).hide().prev().show().focus();
      var idValue = s.attr("id");
      if (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
      }
      var clsValue = s.attr("class");
   if (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
      }
    }
  }

  //判断是否支持placeholder
  function isPlaceholer() {
    var input = document.createElement('input');
    return "placeholder" in input;
  }
  //不支持的代码
  if (!isPlaceholer()) {
    $(function() {

      var form = $(this);

      //遍历所有文本框,添加placeholder模拟事件
      var elements = form.find("input[type='text'][placeholder]");
      elements.each(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
  var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            s.val(pValue);
          }
        }
      });

      elements.focus(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
  var sValue = s.val();
        if (sValue && pValue) {
          if (sValue == pValue) {
            s.val('');
          }
        }
      });

      elements.blur(function() {
        var s = $(this);
        var pValue = s.attr("placeholder");
  var sValue = s.val();
        if (!sValue) {
          s.val(pValue);
        }
      });

      //遍历所有密码框,添加placeholder模拟事件
      var elementsPass = form.find("input[type='password'][placeholder]");
      elementsPass.each(function(i) {
        var s = $(this);
        var pValue = s.attr("placeholder");
  var sValue = s.val();
        if (pValue) {
          if (sValue == '') {
            //DOM不支持type的修改,需要复制密码框属性,生成新的DOM
            var html = this.outerHTML || "";
            html = html.replace(/s*type=(['"])?password1/gi, " type=text placeholderfriend")
              .replace(/s*(?:value|on[a-z]+|name)(=(['"])?S*1)?/gi, " ")
              .replace(/s*placeholderfriend/, " placeholderfriend value='" + pValue
              + "' " + "onfocus='placeholderfriendfocus(this);' ");
            var idValue = s.attr("id");
            if (idValue) {
              s.attr("id", idValue + "placeholderfriend");
            }
            var clsValue = s.attr("class");
   if (clsValue) {
              s.attr("class", clsValue + "placeholderfriend");
            }
            s.hide();
            s.after(html);
          }
        }
      });

      elementsPass.blur(function() {
        var s = $(this);
        var sValue = s.val();
        if (sValue == '') {
          var idValue = s.attr("id");
          if (idValue) {
            s.attr("id", idValue + "placeholderfriend");
          }
          var clsValue = s.attr("class");
    if (clsValue) {
            s.attr("class", clsValue + "placeholderfriend");
          }
          s.hide().next().show();
        }
      });

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

使用很简单,例子如下:

复制代码 代码如下:

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="placeholderfriend.js" type="text/javascript"></script>
</head>
<body>
<input placeholder="账号/手机号码" ><br>
<input placeholder="密码" type="password" >
</body>
</html>

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时...

jquery怎获取一组文本框的任意一个文本框

<script src="jquery-1.6.4.min.js"></script>
<script>
$(function(){
$(".d>input[type='text']").click(function(){
alert($(this).val());
})
})
</script>
<div class="d">
<input type="text" value="test1"/>
<input type="text" value="test2"/>
<input type="text" value="test3"/>
</div>