Скрипт, чтобы при фокусе на форму поиска менялся цвет кнопки?

Question

[kkoshakk]

https://jsfiddle.net/kkoshakk/2y3ob1xg/

Answer 1

[HamSter]

input:focus+button {
  background: red;
}

или

$('input').on('focus', function(){
  	$('.btn').css("background-color", "pink");
  })

Comments

[kkoshakk]

в IE такой подход не работает, я пробывал, да и элементы должны иметь общего родителя

[HamSter]

kkoshakk: поправила чуточку

[Владислав Старцев]

kkoshakk: input:focus+button должен работать в IE c 8 версии т.к. это CSS2

[kkoshakk]

Владислав Старцев: он работает, но фокус в IE сразу же теряется после нажатия enter, а в остальных браузерах фокус остается на форме до перегрузки страницы

[Владислав Старцев]

kkoshakk: ну вообще по идее это правильно, лично мне не нравится что фокус остается, поэтому я по умолчанию обычно его не ставлю, либо отключаю, а в целом самым популярным ие11 в рунете пользуется 2.6% + 1.5% старыми версиями до ие8 (посетители, не факт что уникальные), так что парится из-за этих максимум 4% нет особого смысла, по крайней мере в данном случае верстка от этого не поедет.

[kkoshakk]

и все же хотелось бы найти решение

Answer 2

[lega]

jsfiddle.net/lega911/87z177ow

Comments

[kkoshakk]

все ok, только скрипты не работают

[lega]

kkoshakk: там и нет скриптов, и jquery нету. это просто пример по топику.

[kkoshakk]

lega: точно, не заметил, что jquery нету, спасибо

[kkoshakk]

А на локалхосте такой код не работает!!??

[lega]

kkoshakk: Нужно что-б Angular Light был подключен - angularlight.org/bin/alight_0.12.last.min.js

[kkoshakk]

lega: так а смысл подключать целую библиотеку, проще тогда уже такой скрипт поцепить:

$('input').on('focus', function(){
$('.btn').css("background-color", "pink");
})

[lega]

kkoshakk: На перспективу, в больших проектах выходит в 10-100 раз меньше кода, ну и работает в десятки раз быстрее.

[kkoshakk]

lega: а как с помощью этой библиотеки сделать задержку в 200ms после нажатия submit и потом отправить данные?

[lega]

jsfiddle.net/lega911/agyLvd5L
Добавил на кнопку: @click.throttle-200="send()", и в функции send можно делать что угодно, хоть данные отправлять

[kkoshakk]

lega: ну у меня есть такой скрипт:

$('#navbar_form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 200);
});

Как его переделать на angular?

[lega]

> Как его переделать на angular?
Очень просто, главное желание.

Если хотите "померить", то вот пример jquery и аналогичный на alight из вопроса с тостера. Статья на хабре.

[kkoshakk]

lega: Не, не померить, у меня есть два скрипта:

//PAUSE FORM SUBMISSION
// ====================

$('#navbar_form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 2000);
});

// START ANIMATION
// ===============

$('.btn-default').bind("click", function() {
$(this).addClass('ripple');
});

$('.form-control').focus(function() {
$('.btn-default').css("background-color", "#f0f0f0");
});

Суть в чем. Есть некая анимация на сабмите при клике, но поскольку, сабмит слишком быстро происходит, анимация не успевает полностью сработать. Мне нужно, что бы при нажатии на сабмит была пауза в 200 ms, за это время сработала анимация и дальше сработало стандартное действие сабмит в форме. Помогите, пожалуйста, и я отстану от Вас.

[lega]

kkoshakk: вот пример jsfiddle.net/lega911/4vmt1dfb

Я добавил @submit.throttle-500="$element.submit()" на форму - ловится событие submit, далее паттерн throttle на 500мс, далее вызывается $element.submit(), где $element - текущий элемент.

[lega]

kkoshakk: Добавил анимацию на кнопку: jsfiddle.net/lega911/4vmt1dfb

@click.noprevent="clicked=1" - на клике устанавливаем значение переменной clicked=1
al-class="ripple: clicked" - добавляет класс ripple если clicked ~ true

[kkoshakk]

lega:спасибо большое! Единственная загвоздка в IE - он теряет фокус моментально после нажатия enter и в нем анимация некрасиво работает, можно как-то сделать, что бы фокус в инпуте ie держал пока не перегрузится страница?

[lega]

kkoshakk: хз, это какая-то фича IE? можно попробовать установить фокус обратно при потере фокуса или сабмите <input @blur="$element.focus()"

[kkoshakk]

lega: а как наоборот? снять фокус после нажатия энтера или клика?