如何解决Javascript函数无法在Chrome中正常工作
| 我使用js来更改div颜色取决于输入是否单击,或者在firefox上选择其工作完美,但是单选输入看不到onblure属性,因此在单击任何位置时它都不会将div返回其静态颜色 这里的功能<script type=\"text/javascript\">
function highlight(element) {
element.parentNode.style.backgroundColor = \'#84DFC1\';
}
function removeHighlight(element) {
element.parentNode.style.backgroundColor = \'\';
}
</script>
这里是无线电输入
<div class=\"form-item\">
<label>Gender:</label>
<input id=\"male-radio\" type=\"radio\" name=\"radio\"value=\"male\" class=\"radio-form\" onselect=\"highlight(this);\" onchange=\"highlight(this);\" onfocus=\"highlight(this);\" onblur=\"removeHighlight(this);\"></input>
<label id=\"male-label\">Male</label>
<input id=\"female-radio\" type=\"radio\" name=\"radio\" class=\"radio-form\" value=\"female\" onselect=\"highlight(this);\" onchange=\"highlight(this);\" onfocus=\"highlight(this);\" onblur=\"removeHighlight(this);\"></input>
<label class=\"radioform-label\">Female</label>
</div>
解决方法
Safari和Chrome(即WebKit浏览器)不会响应于单选按钮,复选框和按钮的鼠标操作而触发“焦点”和“模糊”事件。这是有关主题的PPK \“ Quirksmode”页面。但是,当使用键盘浏览表单时,它们会触发事件。
,试试这个(在IE9,FF4中测试):
<script type=\"text/javascript\">
function highlight(element)
{
element.parentNode.style.backgroundColor = \'#84DFC1\';
}
function removeHighlight(element)
{
element.parentNode.style.backgroundColor = \'\';
}
</script>
<div class=\"form-item\">
<label>
Gender:</label><input id=\"male-radio\" type=\"radio\" name=\"radio\" value=\"male\" class=\"radio-form\" onclick=\"highlight(this);\" onblur=\"removeHighlight(this);\"></input>
<label id=\"male-label\">
Male</label>
<input id=\"female-radio\" type=\"radio\" name=\"radio\" class=\"radio-form\" value=\"female\" onselect=\"highlight(this);\" onclick=\"highlight(this);\" onblur=\"removeHighlight(this);\"></input>
<label class=\"radioform-label\">
Female</label>
</div>
这在Safari或Chrome中不起作用。根据W3C,onblur不是单选按钮的有效事件。
您也可以只删除计时器上的突出显示。见下文。这将适用于所有浏览器。
<html>
<head>
<script type=\"text/javascript\">
function highlight(element)
{
element.parentNode.style.backgroundColor = \'#84DFC1\';
//Remove highlight in 3 seconds
setTimeout(\"document.getElementById(\'\" + element.id + \"\').parentNode.style.backgroundColor = \'\'\",3000);
}
</script>
</head>
<body>
<div class=\"form-item\">
<label>
Gender:</label><input id=\"male-radio\" type=\"radio\" name=\"radio\" value=\"male\" class=\"radio-form\" onclick=\"highlight(this);\"></input>
<label id=\"male-label\">
Male</label>
<input id=\"female-radio\" type=\"radio\" name=\"radio\" class=\"radio-form\" value=\"female\" onselect=\"highlight(this);\" onclick=\"highlight(this);\"></input>
<label class=\"radioform-label\">
Female</label>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。