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

伙计们，我有一个函数，它检查两个文本框的值，根据它们是否相等，做一些特定的事情，函数如下：

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>

使用“onfocus”事件来实现：

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

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

使用“onfocus”事件来实现它：

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

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

仅当我在文本框外单击时才起作用，当光标在文本框内（焦点上）时才可能使其起作用

看起来您正在调用函数

onblur

（焦点向外）。对我来说，您可以使用

oninput

事件，它将在每次输入时触发，而不是

focus

：

演示：

函数ajx（）{
var e_value=document.getElementById（'email'）.value.trim（）；
var text_value=document.getElementById（'text2'）.value.trim（）；
试一试{
如果（e_值==文本_值）{
document.getElementById（'email'）.style.border='2px实心红色'；
document.getElementById（'mes'）.innerHTML='email has take'；
}
如果（e|u值==“”| |！e|u值.包括（'@'）| |！e|u值.包括（'.'））
{
document.getElementById（'email'）.style.border='2px solid none'；
document.getElementById（'mes'）。innerHTML=''；
}
否则{
document.getElementById（'email'）.style.border='2px纯蓝色'；
document.getElementById（'mes'）。innerHTML=''；
}
}
捕获（e）{
文件。编写（e）；
}
}

仅当我在文本框外单击时才起作用，当光标在文本框内（焦点上）时才可能使其起作用

看起来您正在调用函数

onblur

（焦点向外）。对我来说，您可以使用

oninput

事件，它将在每次输入时触发，而不是

focus

：

演示：

函数ajx（）{
var e_value=document.getElementById（'email'）.value.trim（）；
var text_value=document.getElementById（'text2'）.value.trim（）；
试一试{
如果（e_值==文本_值）{
document.getElementById（'email'）.style.border='2px实心红色'；
document.getElementById（'mes'）.innerHTML='email has take'；
}
如果（e|u值==“”| |！e|u值.包括（'@'）| |！e|u值.包括（'.'））
{
document.getElementById（'email'）.style.border='2px solid none'；
document.getElementById（'mes'）。innerHTML=''；
}
否则{
document.getElementById（'email'）.style.border='2px纯蓝色'；
document.getElementById（'mes'）。innerHTML=''；
}
}
捕获（e）{
文件。编写（e）；
}
}

因此//一些代码。。。如何更改边框颜色？我添加了document.getElementById（“email”）.onfocus=function（）{style.border='2px solid red'；}；但现在我无法在文本框中输入，无法查看编辑后的答案。它工作得很好！因此，一些代码。。。如何更改边框颜色？我添加了document.getElementById（“email”）.onfocus=function（）{style.border='2px solid red'；}；但现在我无法在文本框中输入，无法查看编辑后的答案。它工作得很好@CurtisCrentsil，请使用相关HTML更新问题：）@CurtisCrentsil，没有带有

id=“text2”

和

id=“mes”

的元素@CurtisCrentsil，你也不需要任何的

onkeydown=“ajx（）”onmousemove=“ajx（）；”onmouseover=“ajx（）；”

有text2和mes的元素，text2是由php生成的，mess是标签名，我可以问一下你们怎么把代码放在评论中吗？@CurtisCrentsil，评论不是发布代码的合适地方，虽然我已经用演示解决方案更新了答案：）@CurtisCrentsil，请用相关的HTML更新问题：）@CurtisCrentsil，没有带有

id=“text2”

和

id=“mes”

的元素@CurtisCrentsil，你也不需要任何的

onkeydown=“ajx（）”onmousemove=“ajx（）；”onmouseover=“ajx（）；”

有text2和mes的元素，text2是由php生成的，mess是标签名，我可以问一下你们怎么把代码放在评论中吗？@CurtisCrentsil，评论不是发布代码的合适地方，虽然我已经用演示解决方案更新了答案：）