Clear field 'x' on IE11 Enterprise Mode or Compatibility mode

Question

So i read it in here that clear field 'x' solution for IE10 and above

Works on IE10 non compatibility mode
Works on IE11 in Win7 non compatibility mode
Not working on IE11 in Win8 non compatibility mode
Not working in all Compatibility mode
Not working in IE11 Enterprise Mode too.

The solution i meant is by adding the following line in the CSS of the application

::-ms-clear {
    display: none;
}

I want to know if there any other ways to disable the clear field 'x'? I think it should be configured somewhere in the IE10/11 configurations?

Somehow the clear field in compatibility or enterprise mode makes plugins like JqGrid becomes unable to work properly, especially in the filter textbox, where clearing the input in the filter field of Jqgrid using the clear field won't trigger the jqgrid's filter function

EDIT ---------------------------------------------------

I'm sorry if i didn't make my question clear. The application that i developed uses the JqGrid to display the data, and also allows the user to filter the data displayed. But in Enterprise Mode, i saw that whenever a value is typed into the filter box, IE will display the clear field icon 'x' on the input. Normally JqGrid will filter the data displayed when there are changes on the filter textbox (from key input), even when i erased the input in filter textbox with backspace, JqGrid will detect the changes and displayed the data appropriately.

But with IE's clear field, when clicking on the 'x' to erase my input on the filter textbox, JqGrid doesn't show any respond. I tried with click event so that when i click on the 'x', i hope that JqGrid will recognize the click i made, but i realized that JqGrid will respond the moment i try to focus on the filter textbox, which is not what i want.

I tried to erase the 'x' using CSS, which works well as shown in your demo, but its not working in compatibility and enterprise mode.

So i was thinking, instead of erasing the 'x', why not i just make it so that JqGrid will respond when user clicked the 'x'. But so far all my solutions failed to work.. or work but not in the way that i want. I cannot simply switch off the compatibility mode because that is not up to me to decide..

score 2 · Accepted Answer · answered Aug 14 '14 at 18:20

2

If the pseudo-element ::-ms-clear do what you want then you should use it. I disagree that IE11 in Win8 works incorrectly in non compatibility mode. I personally prefer to place <meta http-equiv="X-UA-Compatible" content="IE=edge"/> to switch off compatibility mode for the HTML page. Like you can verify on the demo all works correctly on IE10/IE11 Win7/Win8.

answered Aug 14 '14 at 18:20

Oleg

220,925
34
403
798

Yeah it indeed works for non compatibility mode. But somehow my work prioritization goes to the compatibility and enterprise mode, so its kind of bugging me since none of the solutions i tried worked on these 2 modes. – Fred A Aug 15 '14 at 04:48
Btw Oleg, just want to ask.. is it possible for JqGrid to detect the 'x' when user clicks and clear the field? The problem now is that, it clears the field but JqGrid won't respond to it. – Fred A Aug 15 '14 at 05:50
@FredA: Sorry, but I don't understand which relation has jqGrid to the problem. What you mean under "JqGrid won't respond to it"? What behavior you want to implement? You can write your `focus` event handler and do something. You can use [documentMode](http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx) property to detect whether the compatibility mode (and which one, for example IE5, IE7, ...) are used. I still sure that it's better to switch off the compatibility mode for all HTML pages which you develop. – Oleg Aug 15 '14 at 06:04
Ah sorry if i didn't make myself clear. I already edited my question above. Hope i got my question clear this time > – Fred A Aug 15 '14 at 06:21

score 0 · Answer 2 · edited May 23 '17 at 12:07

Found solution for this one, to make the clear field in IE10 and above working for JqGrid.. tested and it works for both non and compatibility/enterprise mode.

if (window.navigator.userAgent.match( /(MSIE|rv:11.0)/ )){
            var selectors = JSON.parse(sessionStorage.selectors);
            sessionStorage.selectors = "";

            $(selectors.join(', ')).bind("mouseup", function(){
                var $input = $(this),
                    oldValue = $input.val();

                if (oldValue == "") return;

                var filters = {groupOp: "AND", rules: []};

                setTimeout(function(){
                    var newValue = $input.val();
                    if (newValue == ""){
                        //Reloading the grid with newValue's value
                        filters.rules.push({field:$input[0].name, op:"bw", data:newValue});
                        $grid[0].p.search = true;
                        $.extend($grid[0].p.postData, {filters:JSON.stringify(filters)});
                        $grid.trigger("reloadGrid");
                    }
                }, 1);
            });
        }

Using reference taken from Event fired when clearing text input on IE10 with clear icon

Clear field 'x' on IE11 Enterprise Mode or Compatibility mode

2 Answers2