IE input cross sign

Question

I create a text input in bootstrap modal and I would like to do the input validation for the input text(the text inside cannot be empty. If so, submit button is disabled). For input validation, it works well in Chrome and Firefox, but has some problem in IE. The problem is the input box in IE has a little cross sign at the top right corner as shown in the below picture(but chrome and firefox does not have) and when the user input something, the cross sign shows. If deleting the text one by one until empty, validation works and the button is disabled. If deleting the text using the cross sign at the first time, validation works. However, for second time and afterwards, the validation does not work and submission is allowed. The submitted content will be the text before deleting using cross sign. It seems to me that IE cache the text. I would like to know how to solve this problem?

Update: I found the answer to solve this problem for IE10&11(Remove IE10's "clear field" X button on certain inputs? ), but what is the solution for earlier version of IE?

<input type="text" name="name" ng-model="newName" required/>
<button type="button" class="btn btn-primary" ng-click="submit()" ng-disabled="form.name.$invalid" data-dismiss="modal">Submit</button>

Answer 1

Hide works fine but alternatively without hiding it, you can handle it using jquery (or jqlite via angular.element ). You can check the mouse event on text input field and if the element is not pristine & if the newvalue is null then trigger angular change event on that input field using triggerHandler method.

$('#textFieldId').bind("mouseup", function() {
        var $input = $(this);
        var oldValue = $input.val();
        if (oldValue == "") {
            return;
        }
        setTimeout(function() {
            var newValue = $input.val();
            if (newValue == "") {
                $input.triggerHandler('change');
            }
        });
    });

http://plnkr.co/edit/GgU3XbaRaVUNW4NBrzKm?p=preview

And similarly with some minor changes you can create E/A type directive & write same code inside link function & use it on input fields.

Answer 2

use this css:

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