我一直在尝试在文本输入中使用默认值,然后使用jQuery,当您“onfocus”文本框时,它会使文本变为黑色(默认为浅灰色),并删除默认值。我想你知道我在说什么,所以你知道如何实现这个目标吗?
答案 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'});
}
});
});
答案 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)
我目前正在使用的城市价值投入。在焦点上它删除了值。在模糊(未聚焦)时,它返回默认值,但通知用户它是必需的。
`.red{color:red;}`
<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>
$(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脚本:
下载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;}