Permalink
Browse files

Forms: hide the native clear button on IE 10 when JQM clear button is…

… visible on text inputs. Fixes #5756 - Textinput in IE10 has a default clear icon
  • Loading branch information...
1 parent 130968f commit 4782044847a6926fa7b1288f6cf18a0d6b0df541 @RedWolves RedWolves committed Mar 12, 2013
Showing with 25 additions and 1 deletion.
  1. +3 −0 css/structure/jquery.mobile.forms.textinput.css
  2. +22 −1 tests/unit/textinput/textinput_core.js
@@ -26,6 +26,9 @@ input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }
/* Resolves issue #5131: Width of textinput depends on its type, for Android 4.1 */
input[type=number]::-webkit-outer-spin-button { margin: 0; }
+/* Resolves issue #5756: Textinput in IE10 has a default clear icon */
+input[data-clear-btn=true]::-ms-clear { display: none; }
+
@media all and (min-width: 28em){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
@@ -89,5 +89,26 @@
test( "data-clear-btn does not add clear button to textarea", function() {
ok( ! $( "#textarea-clear-btn" ).next().is( "a.ui-input-clear" ), "data-clear-btn does not add clear button to textarea" );
});
-
+
+ test( "data-clear-btn does not add native clear button to input button (IE10)", function() {
+ // Get an input element, initial height, and reserve d for height difference
+ var e = $( "input[data-clear-btn='true']" ),
+ h = e.height(), d;
+
+ e.addClass("msClear");
+ e.val("some text").focus();e.val("some text").focus();
+ // Avoid syntax errors
+ try {
+ document.styleSheets[0].addRule(".msClear::-ms-clear", "height: 100px");
+ } catch (o) {
+ ok( true, "browser does not have the native feature for a test");
+ return true;
+ }
+
+ // If the pseudo-element exists, our height should be much larger
+ d = e.height() > h;
+
+ ok( !d, "native clear button is still visible" + d );
+ });
+
})(jQuery);

0 comments on commit 4782044

Please sign in to comment.