IE10+ 上的 AngularJS，带有占位符的文本区域导致“无效参数”。

Posted 2023-03-04

【中文标题】IE10+ 上的 AngularJS，带有占位符的文本区域导致“无效参数”。

【英文标题】：AngularJS on IE10+ ,textarea with placeholder cause "Invalid argument."

【发布时间】：2013-12-12 01:06:08

【问题描述】：

在 IE10+ 上使用 angularJS、TextArea 和占位符时出现“无效参数”。

这只会在使用</textarea> 关闭 textarea 节点时发生，并且在我现在自行关闭 textarea 时不会发生。

这将引发“无效参数”异常：

<div ng-app>
    <input ng-model="placeholderModel" type="text"/>
    <textarea id="message" placeholder="placeholderModel" ng-model="textareaModel"></textarea>
</div>

这将毫无问题地工作：

<div ng-app>
    <input ng-model="placeholderModel" type="text"/>
    <textarea id="message" placeholder="placeholderModel" ng-model="textareaModel"/>
</div>

在此处运行示例：http://jsfiddle.net/huecc/

【问题讨论】：

这刚刚解决了 IE、Angular 和 textareas 的另一个错误。谢谢！

仍然存在：github.com/angular/angular.js/issues/5025

仅供参考：我在 android chrome 上遇到了同样的问题。

应该显示什么网页？

在 IE10+ 中：即使这样：<div ng-app> <input ng-model="buyer_message" type="text"/> <textarea id="message" placeholder="buyer_message" ></textarea> </div> 也很奇怪。它同时更新占位符和内容：P

【参考方案1】：

我今天遇到了这个错误，偶然发现了这个问题。这就是为我解决它的方法

之前：

<textarea placeholder="[ 'NAME' | translate ]" ng-model="name" name="name"></textarea>

之后：

<textarea placeholder="[ 'NAME' | translate ]" ng-model="name" name="name"> </textarea>

请注意文本区域内的小空间，这实际上阻止了 IE 抱怨...

【讨论】：

这对我不起作用，但你让我走上了正轨！我用过： translate>'TRANSLATE_ME''TRANSLATE_ME' |翻译

它不再抛出错误，但也不显示占位符文本。除非你之后删除空间

是的，他们可能在 Windows 10 中修复了它。实际上，我最终得到了一个对每个文本区域执行 element.innerText = ''; 的指令，因为我不想费心记住要在其中留一个空格所有文本区域。

这个工作的事实证明 IE 很烂！发送！ @F.H.；确保将文本区域的关闭标记与打开标记保持在同一行（显然，仅 IE 需要）。

【参考方案2】：

这似乎是您绑定到元素占位符的方式的问题 - 我知道这很奇怪。

我能够使用 ng-attr-placeholder 指令在 IE 中正常工作，而不是直接绑定到 DOM 中的属性。

例如，而不是：

<textarea placeholder="placeholderModel" ng-model="textareaModel"></textarea>

试试这个：

<textarea ng-attr-placeholder="placeholderModel" ng-model="textareaModel"></textarea>

相关： AngularJS v1.2.5 script error with textarea and placeholder attribute using IE11

【讨论】：

ngAttrPlaceholder 似乎已被弃用。如果您仍想使用此方法，您可能需要使用自定义指令，如 here 所示。或者您可以按照其他答案的建议在 之间添加一个空格。

【参考方案3】：

我知道这个问题现在已经很老了，但我想我也会提出我的想法。几个月前我们遇到了这个问题，不得不提出一个修复，所以我们最终使用这个指令来解决这个问题：

mod.directive('placeHolder', [
    function()
        return 
            restrict: 'A',
            link: function(scope, elem, attrs)
                scope.$watch(attrs.placeHolder, function(newVal,oldVal)
                    elem.attr('placeholder', newVal);
                );
            
        ;
    
]);

然后你可以在你的视图中使用它：

<textarea place-holder="placeholderModel" ng-model="textareaModel"></textarea>

一旦您的模型数据到达（可能是异步的），该指令将向<textarea> 添加一个传统的placeholder 属性，它会按您的意愿工作。

这不是最好的解决方案，但它确实有效。希望对您有所帮助。

【讨论】：

当我们可以使用ng-attr-placeholder 指令时，无需编写自定义指令。 :)

我真的不知道 ng-attr-* 指令的存在。这听起来肯定会成功。