IE 10 Text Box Clear Button Covers Text

When working on a project that required quantities to be entered into a text box and displayed aligned to the right of the text box, I ran across a peculiar issue. If the text box had focus, a new button appeared in the text box that would allow the user to completely clear the contents of the text box. When focus moved to another element on the page, the clear button disappeared, but part of the right side of the text that was previously displayed in the text box disappeared as well. If you were to inspect that element’s value via JavaScript, you would discover that the data was still intact, and that only its display was affected.

Unfortunately, the only way to reproduce these symptoms was to view the site in Internet Explorer 10. It seems that others have had this sort of issue before, entirely in IE10. I have attempted to reproduce the issue with IE11 to no avail as it seems that Microsoft was able to correct this bug before they released the latest version of their browser. There is a workaround that should help hide the text box clear button whether the field has focus or not.

If you want to hide the clear button for all text-boxes, you can use the following CSS, and customize it to fit your needs.

input[type="text"]::-ms-clear {
    display: none;
}
Tags:

Related Posts

Apr 2, 2014
2 minutes

Can Legacy Internet Explorer Go Away Already?

For years, Internet Explorer was a four-letter word around web developers. Recently, Microsoft has stepped up their game when it comes to their web browser. I almost have to pinch myself to make sure I’m not dreaming when I type this, but Internet Explorer 10 and 11 are decent and modern web browsers that many websites don’t have to do anything special to support.

However, Internet Explorer 9 and before are another story. The latest compatibility problemn I ran across would be one that is quite confusing to a web developer that has not been around those that have dealt with it before. The symptoms are that CSS rules that you can verify are in your CSS file are not being applied in Internet Explorer, but are applied in Chrome, Safari, Firefox, etc.

#internet-explorer
Read More
Apr 11, 2014
2 minutes

How Not to Use SQL Transactions

SQL Transactions allow you to isolate atomic operations so that you can ensure that a third party does not update the data affected during the atomic operation protected by the transaction. An example of an operation that you would want to protect with a SQL Transaction would be transferring funds from one bank account to another. The first step of this operation would be to subtract the funds from bank account A. Once complete, we would then add the same amount of funds to bank account B. Assuming nothing fails, everything works as expected. However, if there is other database activity at the same time or an error occurs in one of the queries, without a transaction you could have the funds removed from bank account A or added to bank account B, but not both, causing a major balancing issue with your bank accounts.

#microsoft #sql-server
Read More
Mar 27, 2014
One minute

jQuery.hover Issues in Internet Explorer on Windows 7

When creating a new mega-dropdown menu for a site I was working on, I used jQuery’s .hover event to trigger which content the menu was displayed. This seemed to work as expected in most browsers that I tested in, except for one, Internet Explorer. Unfortunately, it wasn’t even in every instance of Internet Explorer.

Windows 7

After Windows Vista came out as one of the biggest duds that the world has ever seen, Windows 7 was a ringing success. Windows 7 is an extremely functional and useful Operating System in the vein of Windows XP, but during testing of this website, we found one troubling issue with every version of Internet Explorer we installed on it. When you hovered over the menu and triggered the jQuery.hover() event, Internet Explorer seemingly locked-up for a few seconds, making the entire browser unresponsive. In a stroke of strange luck, I was unable to reproduce this functionality in Internet Explorer on Windows 8 or 8.1, so this is something that only affects the older operating systems. The fix is to replace jQuery.hover() with jQuery(document).on(“mouseenter”) and call the appropriate function as well.

#internet-explorer #jquery #windows-7
Read More