Form Field: How do I change the background on blur?
Question
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.png') 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
5 answers
solution1
2 ACCPTED 2011-01-09 23:15:26
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.
solution2
0 2011-01-09 19:47:52
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;"
solution3
0 2011-01-09 19:50:25
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?
solution4
0 2011-01-09 20:47:01
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.
solution5
0 2011-01-09 22:37:09
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%'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.