I'm developing a small app where i ask users to put some info. I want to show text hints in the input fields. I do this in a for loop... When the page is loaded, the hints a开发者_如何学Gore displayed correctly but nothing happens on 'focus' and 'blur' events...
I'm wondering why since when I don't use a 'for loop' in my js code, everything works find...
By the way the reason I use a for loop is because I don't want to repeat myself following 'DRY' principles...
Thx for your help!
LP
Here's the code:
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var form_elements = ['#submission_url', '#submission_email', '#submission_twitter']
var text_hints = ['Website Address', 'Email Address', 'Twitter Username (optional)']
$(document).ready(function(){
for(i=0; i<3; i++) {
$(form_elements[i]).val(text_hints[i]);
$(form_elements[i]).focus(function(i){
if ($(this).val() == text_hints[i]) {
$(this).val('');
}
});
$(form_elements[i]).blur(function(i){
if ($(this).val() != text_hints[i]) {
$(this).val(text_hints[i]);
}
});
}
});
</script>
I did this a while ago. it will do what you want
Query.fn.waterMark = function(options) {
var defaults = {
activeColor: '#484646',
inActiveColor: '#8E8E8E'
};
var settings = $.extend({}, defaults, options);
return this.each(function() {
var initVal = $(this).val();
$(this).focus(function() {
if ($(this).val() === initVal) {
$(this).val('').css({ 'color': defaults.activeColor });
}
else { return false }
});
$(this).blur(function() {
if ($(this).val() === '' || $(this).val() === initVal) {
$(this).val(initVal).css({ 'color': defaults.inActiveColor });
}
else { return false }
});
});
};
you simply use it like
$(function() {
$('input').waterMark();
});
it will watermark by reading the initial value. so set your input like
<input type="text" value="Search here..." />
Guys! the script I wrote up there is not the one I intended to post... Anyway, I wrote another script that handles what I wanted to accomplish perfectly.
Here it is!
Cheers!
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}
var form_elements = ['#submission_url', '#submission_email', '#submission_twitter']
var text_hints = ['Website Address', 'Email Address', 'Twitter Username (optional)']
$(document).ready(function(){
form_elements.forEach(function(element, index, array){
$(form_elements[index]).val(text_hints[index]);
$(form_elements[index]).focus(function(){
if ($(this).val() == text_hints[index]) {
$(this).val('');
}
});
$(form_elements[index]).blur(function(){
if ($(this).val() != text_hints[index] && $(this).val() != '') {
return;
}
else if ($(this).val() == '') {
$(this).val(text_hints[index]);
}
});
});
});
</script>
精彩评论