Angular 中关于 IE 问题的占位符

Posted 2023-03-05

【中文标题】Angular 中关于 IE 问题的占位符

【英文标题】：Placeholder in Angular on IE issue

【发布时间】：2016-03-19 07:36:31

【问题描述】：

我有一个自定义输入指令，它将每个新元素作为标签添加到先前输入的项目列表中。我的代码在所有浏览器（Chrome、Safari、Firefox、Edge）中都可以正常工作，我的问题是 IE11 及更低版本。选择输入字段后，我似乎无法清除占位符文本。

我不太确定该怎么做..或如何修改它在 IE 中的表现也很好。

main.html

<tagged disabled=" canNotEdit " property="newProfile.educationSubjects" placeholder=" 'newVacancy.educationFieldsPlaceholder' | translate ">
</tagged>

tagged.html

<div ng-class="'element-disabled': disabled " class="position-relative">
    <div class="position-relative">
        <input type="text"
               ng-disabled=" disabled "
               class="inpt"
               placeholder=" placeholder ">
        <span class="caret">
            <svg class="caret-icon">
                <use xlink:href="images/svg-generated/svg/symbols.svg#add-s">
                </use>
            </svg>
        </span>

        <div>
            <div class="taglist list-inline">
                <ul>
                    <li class="tag"
                        ng-click="removeItem($index)"
                        ng-repeat="item in dataArray track by $index">
                         item 
                        <svg class="tag-close">
                            <use xlink:href="images/svg-generated/svg/symbols.svg#remove"></use>
                        </svg>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

和我的指令控制器：

标记目录.js

'use strict';

export default function() 
  return 

    restrict: 'E',

    scope: 
      dataArray: '=property',
      disabled: '@',
      placeholder: '@'
    ,

    templateUrl: '..path-to/tagged.html',

    link: function(scope, element) 

      var input = angular.element(element.find('input')[0]);
      var button = angular.element(element.find('span')[0]);

      scope.removeItem = function(index) 
        if(scope.disabled === 'true') 
          return false;
        
        scope.dataArray.splice(index, 1);
      ;

      function addTag() 

        let val = input.val().replace(/\/|\\/g, '');

        if(!val) 
          return;
        

        scope.dataArray.push(val);
        scope.$digest();

        input.val('');
      

      input.bind('keydown keypress', function(event) 
        if(event.which === 13 && scope.disabled !== 'true') 
          event.preventDefault();
          addTag();
        
      );

      input.bind('mouseenter', function() 
        if(scope.disabled === 'true') 
          return false;
        
        element.addClass('taglist-hovered');
      );

      input.bind('mouseleave', function() 
        if(scope.disabled === 'true') 
          return false;
        
        element.removeClass('taglist-hovered');
      );

      input.bind('focus', function() 
        if(scope.disabled === 'true') 
          return false;
        
        element.addClass('taglist-focused');
      );

      input.bind('blur', function() 
        if(scope.disabled === 'true') 
          return false;
        
        element.removeClass('taglist-focused');
      );

      button.on('click', function(event) 
        if(scope.disabled === 'true') 
          return false;
        
        addTag();
      );

    
  ;
;

【参考方案1】：

所以我发现问题出在<tagged> 指令上的disabled 元素上。

IE 解释（对他来说未知）tagged 元素的disabled 属性，并禁用所有子元素（包括输入字段）。

所以我所做的实际上是用自定义元素重命名了 disabled 元素，并在我需要的地方将其替换为新元素。