Поиск элементов
добрый вечер, скажите пожалуйтса можно ли как-то оптимизировать этот код? что-то мне не очень нравится что я каждый раз обращаюсь к одному и тому же элементу (пускай даже через переменную и через this), лучше будет если одним разом изменить все необходимые стили? такое вообще возможно в js?)
var email = document.getElementById('email');
email.onkeypress = function() {
this.style.borderColor = '#9DE2EE';
this.style.color = '#434343';
this.style.backgroundImage = 'none';
};
email.onfocus = function() {
if (this.value == 'E-mail') {
this.value = '';
this.style.color = '#434343';
}
};
email.onblur = function() {
if (this.value == '') {
this.value = 'E-mail';
this.style.color = '#BBB';
this.style.borderColor = '#9DE2EE';
this.style.backgroundImage = 'none';
}
else if (this.value != '' || this.value != 'E-mail') {
if (/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(this.value)) {
$.ajax({
type: 'GET',
url: '/reg/check/?v=email&val=' + this.value,
cache: false,
success: function(data) {
if (data > 0) {
email.style.borderColor = '#F29793';
email.style.color = '#F2645C';
email.style.background = 'url(/assets/img/denied.gif) 172px 10px no-repeat';
} else {
email.style.borderColor = '#89CFB0';
email.style.color = '#50BA88';
email.style.background = 'url(/assets/img/accepted.gif) 171px 10px no-repeat';
}
}
});
} else {
email.style.borderColor = '#F29793';
email.style.color = '#F2645C';
email.style.background = 'url(/assets/img/denied.gif) 172px 10px no-repeat';
}
}
};
|
А css-классы наверно для дураков придумали, да?
|
Цитата:
|
так или вы имеете ввиду чтоб программно изменить класс, у которого другие стили?
|
Был вариант с with, но его выпилили. Можно как то так:
<html>
<head></head>
<div>div</div>
<body>
<script>
div=document.querySelector("div")
//старый вариант:
//with(div.style){
// background="red"
// border="2px solid black"
//}
f=function(o){
for(var i in o){this.style[i]=o[i]}
}
f.call(div, {background: "red", border: "5px solid black"})
</script>
</body>
</html>
Но это к оптимизации не относится, это что-то типа рефакторинга, наверное. |
Ебать ты отсталый. Ты проспал плейсхолдеры, проспал html5 валидацию. Все блядь проспал.
<style>
input{
border: 1px solid #9DE2EE;
}
input:focus{
color: #434343;
}
input.invalid{
border-color: #F29793;
color: #F2645C;
}
::-webkit-input-placeholder{
color: #BBB;
}
:-moz-placeholder{
color: #BBB;
opacity: 1;
}
::-moz-placeholder{
color: #BBB;
opacity: 1;
}
:-ms-input-placeholder{
color: #BBB;
}
</style>
<form>
<input type="email" name="email" id="email" placeholder="E-mail" pattern="[\w-\.]+@([\w-]+\.)+[\w-]{2,4}" required="" />
</form>
<script>
var email = document.getElementById('email');
email.form.noValidate = true; // отключаем html5 валидацию
email.onblur = function() {
if (!this.value) {
email.className = email.className.replace(/\s*invalid/, '');
return;
}
var pattern = new RegExp('^' + this.getAttribute('pattern') + '$');
if (!pattern.test(this.value)) {
email.className += ' invalid';
return;
}
/*$.ajax({
type: 'GET',
url: '/reg/check/?v=email&val=' + this.value,
cache: false,
success: function(data) {
if (data > 0) {
email.className += ' invalid';
} else {
email.className = email.className.replace(/\s*invalid/, '');
}
}
});*/
};
</script>
|
вообщем получается что через js другого элегантного варианта нет) понятно, спасибо большое
|
Стоп. А че за хуйня? jQuery же подключил себе? Дык вешай обработчики по-людски, а не через допотопный .onblabla. Ну и классы как бы тоже через jQuery проще щелкать.
|
Цитата:
Это как если бы тракторист просил себе элегантный трактор. |
Цитата:
|
Нужны элегантные стили - юзай css-классы. Элегантнее некуда.
|
Цитата:
|
Цитата:
|
Tecvid,
Чем Вам вариант с миксином не подходит? Или я неправильно понял проблему? |
Цитата:
|
Цитата:
|
Цитата:
|
Я тебе открою тайну: если ты будешь использовать html5 фишки, то html4 браузеры не перестанут работать с твоим сайтом :) Они тупо проигнорируют эти фишки и все.
|
Цитата:
|
Открой любой недопотопный сайт и посмотри как там верстают формы.
Ну конечно, если ты ориентируешься на IE6 юзеров, и собираешься поставить себе на сайте плашку "Best viewed in IE6", то ок, у мня вопросов нет :)) |
Цитата:
|
Цитата:
|
Еще раз: моя хуета будет работать даже в IE6. Просто помимо этого в новых браузерах будут бонусы, как то: работа с отключенным js (раз поставишь себе noscript и уже не сможешь отказаться от него. как минимум сайты грузятся быстрей на порядок и работают без глюков, если разработчик не рукожоп), удобная клава на мобиле/планшете ну и далее в зависимости от того, че ты юзаешь.
|
Цитата:
Тыкни пальцем че где упало? |
Если ты про <header> и прочие теги, то да. В IE8 и младше, если отключены скрипты в нем, то страница, да, развалится. Но я то не за теги тебе говорю же.
|
От этих тегов толку вообще ноль. От некоторых только чутка.
Разве что для слепых role автоматически разпознаются. Ну нам то похуй на слепых. |
А, забыл сказать. Для IE8-9 нужно подключить placeholder.js (погугли).
|
Можешь подключить classList.js и не париться с классами, а писать так:
el.classList.add('abc');
el.classList.remove('cde');
|
Цитата:
Цитата:
Цитата:
|
Цитата:
Конкретней объясни с чем у тебя проблемы. Про <header> и прочие теги я уже говорил. Но учитывая что ie8, да еще с отключенным js еще поискать надо, то я их использую. Хотя не критично. |
Цитата:
|
Цитата:
p.s: верстаю 7-ой год, просто 6 лет чисто на css, так как я в основном с php возился, с дизайном не очень-то парился, а вот год назад уже начал изучать js и постепенно начинаю с ним микшировать css) Цитата:
Цитата:
|
Цитата:
[/quote] Цитата:
|
<style>
input{
border: 1px solid #9DE2EE;
}
input:focus{
color: #434343;
}
input.invalid{
border-color: #F29793;
color: #F2645C;
}
::-webkit-input-placeholder{
color: #BBB;
}
:-moz-placeholder{
color: #BBB;
opacity: 1;
}
::-moz-placeholder{
color: #BBB;
opacity: 1;
}
:-ms-input-placeholder{
color: #BBB;
}
</style>
<form>
<input type="email" name="email" id="email" placeholder="E-mail" pattern="[\w-\.]+@([\w-]+\.)+[\w-]{2,4}" required="" />
</form>
<script>
var email = document.getElementById('email');
email.form.noValidate = true; // отключаем html5 валидацию
email.onblur = function() {
if (!this.value) {
email.classList.remove('invalid');
return;
}
var pattern = new RegExp('^' + this.getAttribute('pattern') + '$');
if (!pattern.test(this.value)) {
email.classList.add('invalid');
return;
}
email.classList.remove('invalid');
/*$.ajax({
type: 'GET',
url: '/reg/check/?v=email&val=' + this.value,
cache: false,
success: function(data) {
if (data > 0) {
email.classList.add('invalid');
} else {
email.classList.add('remove');
}
}
});*/
};
</script>
|
Цитата:
Цитата:
|
Нет, ну я конечно встречал людей, у которых стойкое мнение, что если html5 - то обязательно нет поддержки старых браузеров. Но не с 7-летним стажем ))
Не поддерживает браузер [placeholder]? Подключаем полифил на js. Не поддерживает input[type=email] ? Нихера не делаем. Потому что неподдерживаемые инпуты превращаются в input[type=text]. Ну и нам то че. Не поддерживается html5 валидация? Ну и пох. Это чисто бонус для новых браузеров. На сервере один хрен валидация нужна, как не крути. Хочется юзать новые теги - подключай полифил. Тем более что он через кондишнл комментс подключается, а значит полностью игнорируется другими браузерами. Оверхед - нулевой. Не поддерживается css3 анимация? Ну значит будут резкие переходы. Градиенты? Фолбэк на монотонный цвет. Скругления? Фолбэк на квадратные углы (чаще даже симпотней смотрится). Ну и тд и тп. Все это сам должен знать. |
Цитата:
Как будто HTML5 - это какой-то совсем другой стандарт, не совместимый с html4 :) |
Цитата:
|
Tecvid, а, ну тогда верстай картинками, че :) будут и скругления и градиенты ))
Есть конечно еще PIE.htc но с ним только хуже будет. Но ты вообще-то говорил совсем о другом: Цитата:
|
Короче, не вижу мысла убеждать. Если чайник хочет оставаться чайником - пускай.
|
| Часовой пояс GMT +3, время: 04:57. |