how to access the css on focus in javascript?

Question

well guys, i have this function that checks for the value of two text-boxes and depending on whether they are equal or not, does specific things, here is the function:

function ajx()
{
    var e_value = document.getElementById('email').value;
    var text_value = document.getElementById('text2').value;
    try{
    if (e_value == text_value)
    {
        document.getElementById('email').style.border = '2px solid red';
        document.getElementById('mes').innerHTML = 'email has been taken';
    }
else if (e_value == "" || e_value == " "|| e_value.includes('@') == false||  e_value.includes('.') == false)
    {
        document.getElementById('email').style.border = '2px solid none';
        document.getElementById('mes').innerHTML = '';
    }
    else{
        document.getElementById('email').style.border = '2px solid blue';
        document.getElementById('mes').innerHTML = '';
    }
}

catch(e)
{
    document.write(e);
}
}

the main problem i am having here is that this code:

document.getElementById('email').style.border = '2px solid none';

only works when i click outside the text-box, is it possible to make it work whiles the cursor is inside the text-box(on-focus), and how can i archive it? thanks !!!

this is the html:

<div class="wrap-input100 validate-input" data-validate = "Valid email is required: [email protected]">
    <input class="input100 climate" type="email" name="email" placeholder="Email" id="email" onkeydown="ajx()" onmousemove="ajx();" onmouseover="ajx();" oninput="ajx();">

<label id="mes" style="color: red;" ></label>
                        </div>

Mamun · Accepted Answer · 2019-12-23 13:57:15Z

2

only works when i click outside the text-box, is it possible to make it work whiles the cursor is inside the text-box(on-focus)

Seems like you are calling the function onblur (focus out). To me you can use oninput event which will fire on every input instead of focus:

Demo:

function ajx(){
  var e_value = document.getElementById('email').value.trim();
  var text_value = document.getElementById('text2').value.trim();
  try{
    if (e_value == text_value){
      document.getElementById('email').style.border = '2px solid red';
      document.getElementById('mes').innerHTML = 'email has been taken';
    }
    else if (e_value == "" || !e_value.includes('@') || !e_value.includes('.'))
    {
      document.getElementById('email').style.border = '2px solid none';
      document.getElementById('mes').innerHTML = '';
    }
    else{
      document.getElementById('email').style.border = '2px solid blue';
      document.getElementById('mes').innerHTML = '';
    }
  }
  catch(e){
    document.write(e);
  }
}

<div class="wrap-input100 validate-input" data-validate = "Valid email is required: [email protected]">
  <input class="input100 climate" type="email" name="email" placeholder="Email" id="email" oninput="ajx();">
  <input id="text2"/> <br>
  <label id="mes" style="color: red;" ></label>
</div>

edited Dec 23, 2019 at 13:57

answered Dec 23, 2019 at 13:02

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

6 Comments

Mamun Over a year ago

@CurtisCrentsil, please update the question with relevant HTML:)

Mamun Over a year ago

@CurtisCrentsil, there is no element with id="text2" and id="mes"!!!

Mamun Over a year ago

@CurtisCrentsil, also you do not need any of onkeydown="ajx()" onmousemove="ajx();" onmouseover="ajx();"

Curtis Crentsil Over a year ago

there are elements with text2 and mes, text 2 is generated by php and mess is the label name, and may i ask how do u guys put code in your comments?

Mamun Over a year ago

@CurtisCrentsil, comments are not the right place to post code, though I have updated the answer with demo solution:)

|

enbermudas · Accepted Answer · 2019-12-23 13:34:17Z

0

Use the "onfocus" event to achieve it:

document.getElementById("email").onfocus = function() {
  myFunction();
}

function myFunction() {
  document.getElementById("email").style.border = '2px solid red';
}

edited Dec 23, 2019 at 13:34

answered Dec 23, 2019 at 12:59

enbermudas

1,6254 gold badges24 silver badges44 bronze badges

3 Comments

Curtis Crentsil Over a year ago

so for that //some code... how would i change the border color?

Curtis Crentsil Over a year ago

i added document.getElementById("email").onfocus = function() { style.border = '2px solid red'; }; but now i can't type in the text box again

enbermudas Over a year ago

Take a look to the edited answer. It works just fine!

Collectives™ on Stack Overflow

how to access the css on focus in javascript?

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related