javascript - 如何在 javascript 中访问焦点上的 css？

Question

伙计们，我有这个函数来检查两个文本框的值，并根据它们是否相等来执行特定的操作，函数如下:

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);
}
}

我在这里遇到的主要问题是这段代码:

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

仅当我在文本框外单击时才有效，是否可以在光标位于文本框内(聚焦)时使其工作，以及如何将其存档？谢谢!!!

这是 html:

<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
    <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>

Answer 1

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)

似乎您正在调用函数 onblur(聚焦)。对我来说，你可以使用 oninput 事件，它会在每次输入时触发，而不是 focus:

演示:

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: ex@abc.xyz">
  <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>