Изменить фон "onfocus" + другие вещи

Question

У меня есть скрипт

<input type="text" name="name" value="Joe Bloggs" onfocus="this.value=''"/>

Так же, как я делаю с onfocus = "this.value ...", могу ли я изменить фон поля (+ изменить другие вещи?)

Большое спасибо.

Кроме того, есть ли у кого-нибудь лучшее представление о том, как выполнить приведенный выше сценарий, но чтобы текст снова появлялся при отмене его выбора .?

Еще раз большое спасибо.

Answer 1

Рекомендуется оставить стилизацию для CSS, а логику - для JS.

Вы можете сделать это в css, используя псевдокласс :focus.(http://www.quirksmode.org/css/focus.html) К сожалению, он не работает в IE7 или ниже. Для этих браузеров вы можете использовать javascript, чтобы добавить класс к <input>, чтобы сделать то же самое.

CSS

input:focus, input.focus {background:#ff0}

Если вы используете jQuery, вот как вы это сделаете.

$('input').focus(function(){
     $(this).addClass('focus');
});
$('input').blur(function(){
     $(this).removeClass('focus');
});

Answer 2

Что-то вроде

onfocus="this.value=''; this.style.backgroundColor='#f00'" onblur="this.style.backgroundColor='white'"

получит примерно то, что вы хотите сделать просто, хотя для него также было бы возможно плохо взаимодействовать с презентацией, определенной в другом месте, и, таким образом, это, вероятно, довольно грубо, чтобы считаться лучшей практикой.

В качестве альтернативы, вы можете добавить / удалить определенный класс для элемента onfocus / onblur. На этом этапе я бы также поддержал рекомендацию jQuery: хотя это вряд ли необходимо для этого, вы обнаружите, что это делает жизнь с Javascript в целом гораздо приятнее.

Если вы используете jQuery, что-то вроде

$('input').focus(function() { $(this).addClass('focus') });
$('input').blur(function() { $(this).removeClass('focus') });

позволит вам четко определить внешний вид сфокусированных входных данных в CSS. Консультируйтесь с документацией jQuery для окружающего контекста, необходимого, чтобы сделать эту работу.

Answer 3

... id = "name" onfocus = "javascript: yourFunction ();" ...

Тогда ваш js выглядит примерно так:

var inputFld = document.getElementById('name');<br/> 
var oldval = inputFld.value;<br/>
var tempval = "";<br/>

функция yourFunction () {

inputFld.value = tempval;<br/>
inputFld.className = "test" //(building from the first answer)<br/>
//do other stuff...<br/>

}

Затем вы также можете добавить onblur = "javascript: anotherFunction ();" где anotherFunction () сбрасывает inputFld.value к исходному значению.

Обратите внимание, что лучшие практики рекомендуют вам избегать этих глобальных переменных и добавлять подписчики событий для событий onblur и onfocus, а не вставлять их в строку. Но, по крайней мере, изначально вы можете увидеть, работает ли этот код в том виде, в котором он написан, для вас ...

Answer 4

На вашем мероприятии добавьте имя класса ...

el.className+= 'test'

затем установите фон для этого класса в вашем CSS.