在 HTA 中失去焦点时，按钮的虚线边框变为两个实线边框答案

【问题标题】：Dashed border of a button changes to two solid borders when losing focus in HTA在 HTA 中失去焦点时，按钮的虚线边框变为两个实线边框
【发布时间】：2015-05-04 08:41:20
【问题描述】：

在我的 HTA 文件中，我使用 VBScript 来更改单击按钮时的外观。单击的按钮获得虚线边框（如预期的那样）。但是当鼠标离开按钮时，虚线边框变为实线边框加上实心青色内边框。我怎样才能防止这种情况发生？

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Dashed border test</title> 
    <HTA:APPLICATION 
        ID              = "test"
        APPLICATIONNAME = "test" >

    <script language="VBScript" type="text/vbscript">
        Sub StopButton
            document.getElementsByTagName("button").item(0).style.border="dashed medium black"
            document.getElementsByTagName("button").item(1).style.border="none"
        End Sub
        Sub PlayButton
            document.getElementsByTagName("button").item(1).style.border="dashed medium black"
            document.getElementsByTagName("button").item(0).style.border="none"
        End Sub
    </script>
    <style type="text/css">
        button {width:100;height:80;font-size:24;}
    </style>
</head> 

<body>
    <button type="button" onclick="vbscript:StopButton" style="background:blue; color:white;" value="Stop">Stop</button>
    <button type="button" onclick="vbscript:PlayButton" style="background:#0f0;" value="Play">Play</button>
</body> 
</html>

我使用 IE11。 navigator.userAgent="Mozilla/4.0（兼容；MSIE 7.0；Windows NT 6.1；WOW64；Trident/7.0；SLCC2；.NET CLR 2.0.50727；.NET CLR 3.5.30729；.NET CLR 3.0.30729；媒体中心 PC 6.0；.NET4.0C；.NET4.0E；InfoPath.3)"

编辑

附加信息：当我点击背景（白色区域）时，按钮边框变回虚线样式（如左图所示）。

【问题讨论】：

我无法重现您发布的代码示例的问题。你的实际代码中还有其他样式吗？
我贴的是完整的文件内容。您是否将文件保存为 .hta 文件？当我删除 HTA 部分并将其保存为 .htm 文件（并添加 <meta http-equiv="x-ua-compatible" content="IE=8" /> 以使 VBScript 工作）时，按钮边框不会改变。
是的，我将文件保存为 .hta，就像我说的，我无法重现该问题。单击任一按钮会在单击的按钮周围放置虚线，并将其从另一个按钮中删除（不留下任何其他边框）。
青色“边框”出现在焦点按钮上。通常你可以通过设置outline: none来摆脱它。但是，似乎 IE11 以某种方式在按钮内显示青色边框，并且设置轮廓样式不会删除边框。
因为只有 Windows 7 上的 HTA/IE 11 似乎暴露了这种行为（我能够在我的 32 位 Windows 7 测试 VM 上重现它）我认为这是一个错误。

标签： css vbscript windows-7 internet-explorer-11 hta

【解决方案1】：

这是我的解决方法。

首先，您打开一个保存在内存中的全局变量。因此，当用户单击任一选项时。一旦你点击了它，这些选项会帮助它阻止突出显示的 html 元素的默认颜色。

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Dashed border test</title> 
    <HTA:APPLICATION 
        id              = "test"
        applicationname = "test" 
        singleinstance="yes"
        contextmenu="yes"
        navigable="yes"
    />

    <script language="vbscript" type="text/vbscript">
        stopclicked=false
        playclicked=false
        sub stopbutton(click)
            if ((click = true) OR (stopclicked = true)) then
                btnplay.classname="none"
                btnstop.classname="dashed"
                stopclicked=true
                playclicked=false
            else
                window.focus
            end if
        end sub
        sub playbutton(click)
            if ((click = true) OR (playclicked = true)) then
                btnplay.classname="dashed"
                btnstop.classname="none"
                stopclicked=false
                playclicked=true
            else
                window.focus
            end if
        end sub
    </script>
    <style type="text/css">
        button {width:100; height:80; font-size:24;}
        .dashed {border-style: dashed; border-style: black; border-style:medium;}
        #btnstop {background:blue; color:white;}
        #btnplay {background:#0f0;}
        .dashed:
    </style>
</head> 

<body link="" vlink="" alink=""> 
    <button id="btnstop" onclick="stopbutton(true)" onfocus="stopbutton(false)" value="Stop">Stop</button>
    <button id="btnplay" onclick="playbutton(true)" onfocus="playbutton(false)" value="Play">Play</button>
</body> 
</html>

【讨论】：

感谢您的解决方案！它工作正常。它启发了我一个更简单的方法：我刚刚在按钮上添加了onmouseout="window.focus();"。