The script below when the focus is on the search form has changed the color of the button?

2 answers
July 8th 19 at 15:58
input:focus+button {
 background: red;
}


or
$('input').on('focus', function(){
 $('.btn').css("background-color", "pink");
 })
in IE this doesn't work, I tried, and the elements must have a common parent - Carey commented on July 8th 19 at 16:01
: corrected a little - Else.Mohr32 commented on July 8th 19 at 16:04
: input:focus+button should work in IE 8 version because it's CSS2 - berneice.Abshi commented on July 8th 19 at 16:07
: it works, but in IE the focus is lost immediately after pressing enter, while in other browsers the focus remains on the form before reloading the page - Carey commented on July 8th 19 at 16:10
: well, actually the idea is right, personally I don't like that the focus remains, so I usually default it is not set, or turned off, and in General, the most popular ie11 in Runet use 2.6% + 1.5% old versions before IE8 (the visitors, not the fact that unique), so I steamed those up to 4%, it makes little sense, at least in this case, the layout will not go. - berneice.Abshi commented on July 8th 19 at 16:13
and still would like to find a solution - Carey commented on July 8th 19 at 16:16
July 8th 19 at 16:00
everything is ok, only the scripts do not work - Carey commented on July 8th 19 at 16:03
: there are no scripts, and jquery no. this is just an example on the topic. - Else.Mohr32 commented on July 8th 19 at 16:06
: yeah, not noticed that jquery is not present, thanks - berneice.Abshi commented on July 8th 19 at 16:09
And localhost this code is not working!!?? - Carey commented on July 8th 19 at 16:12
: Need b Angular Light were connected - angularlight.org/bin/alight_0.12.last.min.js - berneice.Abshi commented on July 8th 19 at 16:15
: so what's the point to connect the whole library, it's easier then a script to potipiti:

$('input').on('focus', function(){
$('.btn').css("background-color", "pink");
}) - Carey commented on July 8th 19 at 16:18
: For the future, in large projects goes 10-100 times less code, and works well in dozens of times faster. - Carey commented on July 8th 19 at 16:21
: and how to use this library to make latency 200ms after pressing submit, and then send the data? - Bianka0 commented on July 8th 19 at 16:24
jsfiddle.net/lega911/agyLvd5L
Added button: @click.throttle-200="send()", and in the function send, you can do anything, even though the data to send - Carey commented on July 8th 19 at 16:27
: well, I have a script like this:

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

How to change it in angular? - Carey commented on July 8th 19 at 16:30
> How to change it in angular?
Very simply, the main desire.

If you want to "try", here's an example of jquery and similar to alight from the issue with the toaster. Article on habré. - Bianka0 commented on July 8th 19 at 16:33
No, not trying, I have two scripts:

//PAUSE THE 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");
});

The essence of the thing. There is some animation on clicking, but since the submit is too fast, the animation does not have time to fully work. I need when pressing on submit was a pause 200 ms, during this time, the triggered animation and then worked the standard action submit in the form. Please help and I will keep up with You. - Carey commented on July 8th 19 at 16:36
: here is an example jsfiddle.net/lega911/4vmt1dfb

I added a @submit.throttle-500="$element.submit()" to the form - you can catch the submit event, pattern throttle for 500ms, then called $element.submit(), where $element - current element. - Bianka0 commented on July 8th 19 at 16:39
: Added animation to the button: jsfiddle.net/lega911/4vmt1dfb

@click.noprevent="clicked=1" - click to set the value of the variable clicked=1
al-class="ripple: clicked" adds class ripple if clicked ~ true - Carey commented on July 8th 19 at 16:42
:thank you very much! The only catch is IE - it loses focus immediately after clicking enter and it works the animation is ugly, can we do that would be focus to input ie kept until you reload the page? - Bianka0 commented on July 8th 19 at 16:45
: XS, this is some feature of IE? you can try to set the focus back when focus is lost or on <input @blur="$element.focus()" < code> - Carey commented on July 8th 19 at 16:48
: how opposite? to remove the focus after you enter or clicks? - Bianka0 commented on July 8th 19 at 16:51

Find more questions by tags jQueryCSSJavaScriptHTML