Form Field: How do I change the background on blur?
I managed to remove the background when the user clicks on the field but I cannot restore it when it blurs!
This is the field:
<textarea class="question-box" style="width: 240px; background:
white url('http://chusmix.com/Imagenes/contawidget.pn开发者_运维问答g') no-repeat
50% 50%; color: grey;" cols="12" rows="5" id="question-box-' .
$questionformid . '" name="title" onblur="if(this.value == '') {
this.style.color='#848484'; this.style.background='
white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%';}"
onfocus="if (this.value == '') {this.style.color='#444';
this.style.background='none';}" type="text" maxlength="200" size="28"></textarea>
Anyone knows what I'm doing wrong?? Thanks
Unless you primarily need to support IE6/7, stop messing around with JavaScript for something that can be solved with CSS:
textarea.question-box {
width: 240px;
background: white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%;
color: grey;
}
textarea.question-box:focus {
color: #444;
background: none;
}
If you do need to support IE6/7, or IE in compat or quirks mode, try one of the bolt on solutions already available.
I'm pretty sure the problem is from the part this.value=''this.style.background='. You need a semi-colon there. And do you really want to set the value back to blank when the user clicks on it?
onblur="if(this.value == '') {
this.style.color='#848484'; this.value=''this.style.background='
white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%;
You have "E" character after this line, that must be causing your problem.
Anyways, for switching background on elements use onfocus and onblur events
onfocus="var a = 'url(\'http://chusmix.com/Imagenes/form-focused.png\') repeat scroll 0 0 white'; this.style.background=a; return false;"
onblur="var a = 'url(\'http://chusmix.com/Imagenes/form-normal.png\') repeat scroll 0 0 white'; this.style.background=a; return false;"
Hmm, it seems that you didnt quite understood. jQuery is javascript lib used for easier javascript programming.
Add this into to your <head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and than you can use
onfocus="$(this).addClass('focusedinput');" onblur="$(this).removeClass('focusedinput');"
as I mentioned in comment. That should toggle the class focusedinput who should hold the properties such as background or color of an element.
I just removed the quotes from the URL and it work.
Didn't work:
this.style.background='white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%'
Wodked:
this.style.background='white url(http://chusmix.com/Imagenes/contawidget.png) no-repeat 50% 50%'
加载中,请稍侯......
精彩评论