Применение стиля CSS с помощью JavaScript, если текстовое поле пустым

У меня есть эта функция в JavaScript, которые я назвал, используя событие OnClick в моем HTML код:Применение стиля CSS с помощью JavaScript, если текстовое поле пустым

function checkTextField(field) { 
if (field.value == '') { 
    sheet.insertRule("input:focus {background: #fc9fff;}", 1); 
    } 
}

Я проверил, что если оператор работает с использованием оператор предупреждения внутри него вместо insertrule, но кажется, что css применяется, хотя значение поля не пусто. Есть ли что-нибудь еще, что я могу использовать?

источник

2015-04-09 Kristin Vernon

Я не уверен, что полностью понимаю ваш вопрос, но я создал тестовый HTML-файл и что испытательные работы:

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>test</title> 
    <style></style> 
    <script> 
var styleAlreadyAppended = false; 
function checkTextField(field) { 
    var sheet = document.styleSheets[0]; 
    if (field.value == '' && styleAlreadyAppended !== true) { 
     sheet.insertRule("input:focus {background: #f30;}", 0); 
     styleAlreadyAppended = true; 
    } 
    else if (field.value != '' && styleAlreadyAppended === true) { 
     sheet.deleteRule(0); 
    } 
} 
    </script> 
</head> 
<body> 
    <div> 
     <input id="testinput" type="text" value=""> 
     <button onclick="checkTextField(document.getElementById('testinput'))">test</button> 
    </div> 
</body> 
</html>

Протестировано на FF36.

источник

2015-04-09 03:30:08

Но я думаю, что подход, описанный Аруном П. Джонни, лучше и чище. –

Да, но я должен был использовать CSS, но это помогло! Благодаря! –

Добро пожаловать :) –

Проблема заключается в том, когда метод проверки выполняется с пустым элементом, вы вставляете общее правило для input:focus, которое не удаляется при удалении фокуса с текущего элемента.

Лучшим вариантом будет использовать класс как

function checkTextField(field) { 
    if (field.value == '') { 
     field.classList.add('empty') 
    } else { 
     field.classList.remove('empty') 
    } 
}

затем в таблице стилей

input.empty:focus { 
    background: #fc9fff; 
}

источник

2015-04-09 03:18:36

Я пробовал это, но это не изменило фон моего текстового поля на фокусе, когда текстовое поле было пустым –

@KristinVernon как используется метод –

' ' –

может быть, лучший подход, чтобы прикрепить функцию к onchange событию, как это

<input type="text" onchange="checkTextField" />

источник

2015-04-09 03:24:56 Charbz

, но это будет только вставлять стиль, когда состояние из поля меняется, а не просто с фокусом –

извините, что я имел в виду, что вы можете сохранить стиль с помощью onclick, но проверьте с onchange, если значение! = null, а затем удалите его – Charbz

Вы можете использовать чистый CSS с помощью селектора :required и :invalid и установки необходимого атрибута в поле.

<style> 
    input:required:invalid { background: #fc9fff; }  
</style> 

<input name="email" required />

Живая версия здесь: http://jsfiddle.net/devotis/z319pp1f/

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

источник

2015-04-09 19:01:30

Применение стиля CSS с помощью JavaScript, если текстовое поле пустым

ответ

Смежные вопросы