Javascript function not working properly in Chrome_问答_开发者

Javascript function not working properly in Chrome

开发者 https://www.devze.com 2023-03-08 04:48 出处：网络

i do i function with js to change the div color depend on inputs click or select its work perfect on firefox but the radio input not see the onblure property so its never return div to its static colo

here the function

<script type="text/javascript">


    function highlight(element) {
        element.parentNode.style.backgroundColor = '#84DFC1';
    }

    function removeHighlight(element) {
        element.parentNode.style.backgroundColor = '';
    }
</script>

and here the radio inputs

<div class="form-item">
<label>Gender:</label>
<input id="male-radio" type="radio" name="radio"value="male" class="radio-form" onselect="highlight(this);"开发者_StackOverflow中文版 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 and Chrome (i.e., WebKit browsers) do not fire "focus" and "blur" events in response to mouse actions for radio buttons, checkboxes, and buttons. Here is PPK's Quirksmode page on the subject. They do fire events when the keyboard is used to navigate around the form, however.

Try this (tested in 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>

This will not work in Safari or Chrome. According to the W3C, onblur is not a valid event of the radio button.

You could also just remove the highlight on a timer. See below. This will work in all browsers.

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