如何在 javascript 的 IE 中隐藏空的 <span>。 （注意在其他浏览器中工作正常）

Question

我在 IE 中遇到了关于那段简单代码的问题。 我正在使用此代码在发生错误的字段下显示和隐藏错误消息。

function validateStuff(field, msg)
{
    var regex=/^\d{1,7}$/;
    var id= field.name + ".error";
    if (!regex.test(field.value))
    {
      document.getElementById(id).innerHTML= msg;
      return false;
    } 
    else 
    {
        document.getElementById(id).innerHTML= "";
        return true;
    }
} 

跨度看起来像这样

<SPAN ID="field.error" CLASS="regred"></SPAN>

此代码在 chrome 和 Firefox 中工作正常，但验证后的 IE 运行 它显示一个大的空块。

我试过了display:none

function validateStuff(field, msg)
{
    var regex=/^\d{1,7}$/;
    var id= field.name + ".error";
    if (!regex.test(field.value))
    {
      document.getElementById(id).innerHTML= msg;
      document.getElementById(id).style.display = 'inline-block';
      return false;
    } 
    else 
    {
        document.getElementById(id).innerHTML= "";
        document.getElementById(id).style.display = 'none';
        return true;
    }
} 

跨度块仍然存在。

我试过删除 span

function validateStuff(field, msg)
{
    var regex=/^\d{1,7}$/;
    var id= field.name + ".error";
    if (!regex.test(field.value))
    {
      document.getElementById(id).innerHTML= msg;
      return false;
    } 
    else 
    {
        document.getElementById(id).innerHTML= "";
        //IE shenanigan
        var parentNode = document.getElementById(id).parentNode;
        parentNode.removeChild(document.getElementById(id));
        return true;
    }
} 

但是在其他浏览器中它隐藏了预期的跨度仍然显示。

为什么？

Answer 1

您可以将其置于视口之外而不是隐藏。

function validateStuff(field, msg)
{
    var regex=/^\d{1,7}$/;
    var id= field.name + ".error";
    var el = document.getElementById(id); 

    if (!regex.test(field.value))
    {
      el.innerHTML= msg;
      el.style.display = 'inline-block';
      el.style.position = 'static'; 
      el.style.left = '0px'; 
      return false;
    } 
    else 
    {
        el.innerHTML= "";
        el.style.position = 'absolute';
        el.style.left = '-10000px'; 

        return true;
    }
}