Form Field: How do I change the background on blur?_问答_开发者

Form Field: How do I change the background on blur?

开发者 https://www.devze.com 2023-02-03 02:38 出处：网络

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%'

Form Field: How do I change the background on blur?

精彩评论

关注公众号

热门标签

图文推荐

Form Field: How do I change the background on blur?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：