如何隐藏空<span>在IE中使用javascript.(注意，在其他浏览器中工作正常）

How to hide empty <span> in IE in javascript. (Note work fine in other browser)

本文关键字：注意 javascript 其他 浏览器 工作 何隐藏 lt span gt 隐藏 IE      更新时间：2023-09-26

我在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在运行验证后显示了一个大的空块。

我试过显示：无

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

跨度块仍然存在。

我试着移除跨度

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

但当在其他浏览器中隐藏时，跨度仍然会显示出来。

为什么？

您可以将它放在视口之外，而不是隐藏。

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;
    }
}
相关文章：