jQuery删除文本onfocus

时间:2010-03-27 17:51:16

标签: jquery text

我一直在尝试在文本输入中使用默认值,然后使用jQuery,当您“onfocus”文本框时,它会使文本变为黑色(默认为浅灰色),并删除默认值。我想你知道我在说什么,所以你知道如何实现这个目标吗?

6 个答案:

答案 0 :(得分:7)

<input class="txtClass" type="text" defaultVal="Enter your Name" />
<input class="txtClass" type="text" defaultVal="Enter your Designation" />

的javascript

$('body').ready(function(){
  $('.txtClass').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'grey'});
      });

  $('.txtClass').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'black'});
    }
    });
  $('.txtClass').blur(function(){
    if ( $(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'grey'});
    }
    });
});

参见工作示例: http://jsbin.com/ovida3
http://jsbin.com/ovida3/2

答案 1 :(得分:2)

jquery watermark plugin可以让您达到预期的效果。

答案 2 :(得分:1)

$('input:text').bind({
    focus: function () {
        var self = $(this);

        if (self.val() == self.attr('defaultValue')) {
            self.val('').removeClass('default');
        };
    },
    blur: function () {
        var self = $(this),
            val = jQuery.trim(self.val());

        if (val == "" || val == self.attr('defaultValue')) {
          self.val(self.attr('defaultValue')).addClass('default');  
        };
    }
}).trigger('blur');

有一个default的CSS类,它将文本颜色设置为您想要的任何颜色。

使用示例:http://www.jsfiddle.net/2S9hW/

答案 3 :(得分:1)

我目前正在使用的城市价值投入。在焦点上它删除了值。在模糊(未聚焦)时,它返回默认值,但通知用户它是必需的。

CSS

`.red{color:red;}​`

HTML

<input type="text" class="city" value="City" id="oCity" name="oCity"></input>
<label class="oCity red"></label>
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>​
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>​

jquery的

$(document).ready(function() {
var defaultVal = 'City';
$('.city').focus(function() {
    $(this).val('');
});
 $('.city').blur(function(){
    var Value = $(this).val();
    var oId = $(this).attr('id');
    if(Value == '')
    {
        $(this).val(defaultVal);
        $('.'+oId).text('Required');
    }           
});
});​

答案 4 :(得分:0)

您基本上创建了HTML5文本元素的占位符属性所支持的内容。因此,您应该只使用占位符属性,然后检查浏览器是否支持占位符功能:

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}
if (!support_input_placeholder()) {
    $(':text').focus(function(){
        var self = $(this);
        if (self.val() == self.attr('placeholder')) {
            self.val('');
        }
    }).blur(function(){
        var self = $(this),
            value = $.trim(self.val());
        if(val == '') {
            self.val(self.attr('placeholder');
        }
    });
}

<input type="text" name="desc" placeholder="My Email Account">

答案 5 :(得分:0)

您也可以使用Google Watermark插件:

下载最新的jQuery脚本:

http://jquery.com/download/

下载Watermark插件:

https://code.google.com/p/jquery-watermark/

========== head ==========

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.watermark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#input-name").watermark("Your name");
        $("#input-email").watermark("Your e-mail address");
    });
});
</script>

========== body ==========

<div id="wrap-contact">
<form id="form-contact" name="form-contact" method="post" action="">
<div id="layer-email">
<input type="text" name="input-email" id="input-email" />
</div>
<div id="layer-name">
<input type="text" name="input-name" id="input-name" />
</div>
</form>
</div>

========== CSS ==========

/*
========================
form styles
========================
*/
#wrap-contact {
    margin: auto;
    width: 760px;
}
#layer-email {
    float:left;
    width:340px;
    padding:2px;
    background:#ccc url(images/user.png) no-repeat 98% 50%;
}
#layer-name {
    float:right;
    width:340px;
    padding:2px;
    background:#ccc url(images/email.png) no-repeat 98% 50%;
}
#input-email {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;

}
#input-name {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;
}

/*
========================
watermark styles
========================
*/
.watermark {color: #999 !important;}