Поле формы: Как изменить фон на размытие? - PullRequest
Новая
       1

Поле формы: Как изменить фон на размытие?

0 голосов
/ 09 января 2011

Мне удалось удалить фон, когда пользователь нажимает на поле, но я не могу восстановить его, когда он размывается!

Это поле: 

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

Кто-нибудь знает, что я делаю не так ?? Спасибо

Ответы [ 5 ]

2 голосов
/ 10 января 2011

Если вам в первую очередь не нужна поддержка IE6 / 7, прекратите возиться с JavaScript для чего-то, что может быть решено с помощью 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;
}

Если вам нужно поддерживать IE6 / 7 или IE в compatили режим причуд, попробуйте один из вариантов решения уже доступны.

0 голосов
/ 10 января 2011

Я только что удалил кавычки из URL, и он работает.

Не работает: 

 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%'
0 голосов
/ 09 января 2011

Я уверен, что проблема в части this.value = 'this.style.background ='. Тебе нужна точка с запятой. И вы действительно хотите установить значение обратно пустым, когда пользователь нажимает на него?

0 голосов
/ 09 января 2011

Хм, кажется, вы не совсем поняли.jQuery - это библиотека JavaScript, используемая для упрощения программирования на JavaScript.

Добавьте это в свой <head></head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

, и тогда вы можете использовать 

onfocus="$(this).addClass('focusedinput');" onblur="$(this).removeClass('focusedinput');"

, как я упоминал в комментарии.Это должно переключать класс focusinput, который должен содержать такие свойства, как фон или цвет элемента.

0 голосов
/ 09 января 2011 
 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%;

После этой строки у вас есть символ "E", который должен вызывать вашу проблему.

В любом случае, для переключения фона на элементы используйте события onfocus и onblur 

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;"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...