IE输入十字符号答案

【问题标题】：IE input cross signIE输入十字符号
【发布时间】：2017-11-29 15:49:24
【问题描述】：

我在引导模式中创建了一个文本输入，我想对输入文本进行输入验证（里面的文本不能为空。如果是，提交按钮被禁用）。对于输入验证，它在 Chrome 和 Firefox 中运行良好，但在 IE 中存在一些问题。问题是IE中的输入框右上角有一个小十字，如下图所示（chrome和firefox没有），当用户输入内容时，十字符号显示。如果逐一删除文本直到为空，则验证有效并且按钮被禁用。如果第一次使用十字符号删除文本，则验证有效。但是，第二次及之后，验证不起作用并且允许提交。提交的内容将是使用叉号删除之前的文本。在我看来，IE 缓存了文本。我想知道如何解决这个问题？

更新：我找到了解决 IE10&11(Remove IE10's "clear field" X button on certain inputs?) 问题的答案，但是对于早期版本的 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>

【问题讨论】：

标签： html angularjs internet-explorer

【解决方案1】：

Hide 可以正常工作，但也可以不隐藏它，您可以使用 jquery（或通过 angular.element 的 jqlite）来处理它。您可以检查文本输入字段上的鼠标事件，如果元素不是原始元素并且如果新值为 null，则使用 triggerHandler 方法在该输入字段上触发 angular 更改事件。

$('#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

同样，通过一些小的改动，您可以创建 E/A 类型指令并在链接函数中编写相同的代码并在输入字段上使用它。

【讨论】：

【解决方案2】：

使用这个 CSS：

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

【讨论】：