In IE the OnFocus and OnBlur style changes are not functioning properly, while they work successfully in Fire Fox

Question

In IE the OnFocus and OnBlur style changes are not functioning properly, while they work successfully in Fire Fox

Greetings everyone, I have defined the following styles in my CSS:

.on_focus {
    background-color:yellow;
}
.off_focus {
    background-color:white;
}

Now, within my form, there is this input field:

            <label>Last Name</label><br/>
            <input id="l_name" class="text" type="text" name="l_name" maxlength="20" onfocus="this.className='on_focus'" onblur="this.className='off_focus'"/><br/><br/>

While this functionality works perfectly in Fire Fox, it seems to be malfunctioning in Internet Explorer. In IE, the background color of the input field remains white regardless of whether it has focus or not. Can anyone shed some light on why this discrepancy exists?

javascript css internet-explorer firefox

Answer 1

Answer №1

You have the option to achieve this effect using only CSS, although it's not the only method available.

Here is an example of how you can accomplish this with CSS:

input[type="text"]:focus {background-color:Yellow;}
input[type="text"]:blur {background-color:White;}

Make sure to add the attribute selector for type=text in order for this styling to only apply to input tags of that type.

--UPDATE--

If compatibility with Internet Explorer is a concern, you may consider using a JavaScript solution like the one below:

<script type="text/javascript">
    function onFocus(element) {
        //element.style.backgroundColor = "Yellow";
        element.className = "on_focus";
    }
    function onBlur(element) {
        //element.style.backgroundColor = "White";
        element.className = "off_focus";
    }
</script>

Here is how you would implement this in your HTML:

<label for="l_name">Last Name</label> 
<input type="text" id="l_name" onfocus="onFocus(this);" onblur="onBlur(this);" />

Answer 2

You have the option to achieve this effect using only CSS, although it's not the only method available.

Here is an example of how you can accomplish this with CSS:

input[type="text"]:focus {background-color:Yellow;}
input[type="text"]:blur {background-color:White;}

Make sure to add the attribute selector for type=text in order for this styling to only apply to input tags of that type.

--UPDATE--

If compatibility with Internet Explorer is a concern, you may consider using a JavaScript solution like the one below:

<script type="text/javascript">
    function onFocus(element) {
        //element.style.backgroundColor = "Yellow";
        element.className = "on_focus";
    }
    function onBlur(element) {
        //element.style.backgroundColor = "White";
        element.className = "off_focus";
    }
</script>

Here is how you would implement this in your HTML:

<label for="l_name">Last Name</label> 
<input type="text" id="l_name" onfocus="onFocus(this);" onblur="onBlur(this);" />

In IE the OnFocus and OnBlur style changes are not functioning properly, while they work successfully in Fire Fox

Answer №1

Similar questions

What could be the reason why this function in jQuery is not functioning properly?

Display the Astro component based on the query of the current page's type

Expanding the Bootstrap panel to a specific size with a scrollable panel-body

Activate the date-picker view when the custom button is clicked

The integration of Google Translate with Javascript on HtmlEditorExtender is experiencing difficulties and is not functioning properly

Is it possible to retract a message on Discord after it has been sent?

When you click the "Select All" button in a JavaScript dialogue box, all of the checkboxes on the main page will automatically be selected

I believe I am attempting to add some space to a row using CSS, or at least that's what I think I'm trying to achieve

In JavaScript, you can use the document.cookie property to delete specific cookie values identified by their names and values

Exploring the differences between the meta viewport and font size

Angular checkbox filtering for tables

Create a function that can dynamically filter an array of objects and extract specific properties into a new array

Selenium's WebDriver getAttribute function can return an object of type "object",

What is the best way to display an additional component upon logging out in a React application that utilizes

The close button on the modal vanishes on a real iPhone

What is the reason behind my resizer bar not changing color to green?

Is there a way to accomplish this using Bootstrap?

Receive a positive or negative data message through Ajax Response

Blocking of Node.js Promises

Using Nightwatch.js to upload an image file