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

May 19, 2014
4 minutes

Google Analytics Site Speed is a bit Unreliable

Google Analytics will now allow site owners to track the performance of their websites with real live traffic. This is a nice feature that lets you understand just how long it takes for the average visitor to your site to see the fully complete version of your website. While this sounds like a great tool that will give you an accurate view of yoru website’s performance, it does not tell the full story. You can access the Site Speed section of Google Analyics under the Behavior>Site Speed>Overview section. Please be aware that not all visitors will send this information, so you will have to have a certain amount of traffic to your site before you will get any information in this section at all.

#internet-explorer #performance #chrome
Read More
Jul 8, 2014
3 minutes

Always Use Automated Integration Testing

QA or Quality Assurance of a software project is often the area of software development that is most neglected. Typically developers avoid software testing like their lives depended on it. While a basic level of testing is required for a single scenario to validate that your code “works”, the level of testing that is required to ensure that all users have a good user experience across all targeted platforms is something that a developer seems to think is beneath them.

#javascript #microsoft #design-patterns
Read More
May 21, 2014
One minute

Window.Open Causes Browser Compatibilty Issues

One of the things that always annoys me as a web developer is when native browser functions that are accesible from JavaScript do not share the same function signature. One perfect example of this is the window.open function. When you are using non-Microsoft browsers such as Firefox and Chrome, you are able to make a call something like this window.open(url, 'window name', 'dimensions or other settings');. The window name parameter is important because it allows you to open multiple links in the same external window/tab. However, when using Internet Explorer, especially Internet Explorer 8 and older, you can only use window.open(url);. If you try to use the first type of function call, you get a very ambiguous error message in the browser that doesn’t tend to show exactly where the error occurred.

#internet-explorer #javascript #chrome
Read More