How to style (this) input element with javascript when in focus

Question

I want to change the color of the input element that is in focus. I've tried with this but it doesn't seem to be working.

HTML

<li>
   <input id="text1" onfocusout="removeColor()"onfocus="changeColor()" class="slut" value="{{Number}}">
</li>
<li>
    <input id="text1" onfocusout="removeColor()"onfocus="changeColor()" class="slut" value="{{Priority}}">
</li>

JS

function changeColor() {
    $(this).style.backgroundColor = "red";
};
function removeColor() {
    $(this).style.backgroundColor = "white";
};

It can be done with css only. No need to use javascript. Target class slut or input when its on focus .like input:focus{ background:red} — Sahil Dhir
– Sahil Dhir, Commented Mar 24, 2017 at 9:15

mayersdesign · Accepted Answer · 2017-03-24 09:16:02Z

2

You only need CSS for this:

input:focus { 
 background-color: yellow;
}

I'm sure it was just a quick example, but be aware you have two matching ID's in your code. I guess in fact you might want to go with classes

input.yellow:focus { background-color: yellow; }
input.pink:focus { background-color: pink; }

For example

answered Mar 24, 2017 at 9:16

mayersdesign

5,3704 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mayersdesign Over a year ago

No problem at all, sometimes it's easy to think things are harder than they are ;)

Gopi · Accepted Answer · 2017-03-24 09:19:15Z

1

You can use

input:hover{
  background-color:#ff00ff;
}

js Fiddle example

answered Mar 24, 2017 at 9:19

Gopi

9491 gold badge8 silver badges16 bronze badges

Comments

Nathan · Accepted Answer · 2017-03-24 09:24:10Z

If you want to do this with jQuery, you could use the css() method:

function changeColor() {
    $(this).css({"background-color":"red"});
}
function removeColor() {
    $(this).css({"background-color":"white"});
}

A better way would to do this would be to use a combination of CSS / jQuery:

CSS:

.colored {
    background-color: red;
}
:not(.colored) {
    background-color: white;
}

JavaScript:

var colorClass = "colored";
function changeColor() {
    $(this).addClass(colorClass);
}
function removeColor() {
    $(this).removeClass(colorClass);
}

I prefer have a single class as a toggle. The advantage of this is you can update and change the styling as much as you want in the CSS without having to change your JavaScript. This is a good separation of concerns. In addition, you could style child elements and have them inherit the toggled state.

Regolith · Accepted Answer · 2017-03-24 09:27:24Z

0

first pass this in onfocus. then change $(this).style.backgroundColor = "red"; to $(temp).css("backgroundColor", "red");
also use onblur' notonfocusout`

function changeColor(temp) {
    $(temp).css("backgroundColor", "red");
};
function removeColor(temp) {
    $(temp).css("backgroundColor", "white");
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><input id="text1" onblur="removeColor(this)" onfocus="changeColor(this)" class="slut" value=""></li>
<li><input id="text" onblur="removeColor(this)" onfocus="changeColor(this)" class="slut" value=""></li>
</ul>

Hope this help

answered Mar 24, 2017 at 9:27

Regolith

2,97810 gold badges36 silver badges53 bronze badges

Comments

Denis Tsoi · Accepted Answer · 2017-03-24 09:29:11Z

0

TLDR; You can do this without jQuery

CSS selector

input {
  background-color: white;
}

input:focus {
  background-color: red;
}

if with jQuery

$('input').focus(function() {
  $(this).css('background', 'red');
});
$('input').focusout(function() {
  $(this).css('background', 'white');
});

JQUERY: SNIPPET

$('input').focus(function() {
  $(this).css('background', 'red');
});

$('input').focusout(function() {
  $(this).css('background', 'white');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

edited Mar 24, 2017 at 9:29

answered Mar 24, 2017 at 9:16

Denis Tsoi

10.6k8 gold badges42 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to style (this) input element with javascript when in focus

HTML

JS

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related