a better way to swap values of text inputs?
I have an email sign up and search box that have the label inside the box, IE the email box says "sign up" inside the input. When you click in the box the value is removed allowing you to enter your email, if you enter nothing and click out, the "sign up" re appears. I am using the following code:
$(function() {
swap开发者_如何转开发Values = [];
$(".swap_value").each(function(i){
swapValues[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swapValues[i]) {
$(this).val("");
}
}).blur(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swapValues[i]);
}
});
});
});
However, I get the following error in console and am possibly having issues with other scripts due to this. Ill know for sure when I finish debugging.
error assignment to undeclared variable swapValues
Is there a better way to do this? thx
I think you still need 2 Listeners
$('.swap_value').focus(function(){
if($(this).val() == 'sign up'){
$(this).val('');
}
}).blur(function(){
if($(this).val() == ''){
$(this).val('sign up');
}
});
I hope thats gives you an example of how to work with 2 fields:
<html>
<body>
<input type="text" value="sign up" class="swap_value singup"/>
<input type="text" value="search" class="swap_value search"/>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
//<!--
$(document).ready(function(){
$('.swap_value').focus(function(){
if($(this).val() == 'sign up' || $(this).val() == 'search'){
$(this).val('');
}
});
$('.search').blur(function(){
if($(this).val() == ''){
$(this).val('search');
}
});
$('.singup').blur(function(){
if($(this).val() == ''){
$(this).val('sign up');
}
});
});
//-->
</script>
</body>
</html>
This may be too little too late, but I got your code to work with a slight modification:
var swapValues = [];
$('input.swap_value').each(function(i){
swapValues[i] = $(this).attr('value');
$(this)
.focus(function(){
if ( $(this).attr('value') == swapValues[i] ) {
$(this).attr('value','');
}
})
.blur(function(){
if ( $(this).attr('value') == '' ) {
$(this).attr('value', swapValues[i]);
}
});
});
Basically I'm now using .attr('value') instead of .val(). I'm not sure if that was your problem in the first place, but the above code is confirmed working on multiple text inputs on a single page.
This is an old question, but there are new ways of doing this these days. The placeholder attribute in HTML5 covers this functionality, though IE9 and older and Opera Mini don't support it.
Example
<input type="email" placeholder="Sign Up" required>
Note the type and required attribute. Combined, browsers that support the email type will do a client side check for a valid email. Browsers that do not support the email type will render a regular text box. There is also a search type that provides an "x" to clear the search terms if needed. It also reverts to a plain text box in unsupported browsers.
If you must support older browsers, the accepted answer can work as a fall back.
加载中,请稍侯......
精彩评论