时间戳

首页 > 解决方案 > 修剪尾随空格并在没有可见输入时显示占位符 - Angularjs

angularjs - 修剪尾随空格并在没有可见输入时显示占位符 - Angularjs

问题描述

考虑以下输入

<input ng-if="isRequired()"
       type="text"
       name="{{fieldNamePrefix}}[name]"
       ng-value="orderCommodity.name"
       class="form-control top15"
       ng-disabled="disabled"
       placeholder="CERTIFICATION" />

现在考虑用户输入一个空格并移动到下一个字段。由于没有可见的输入，我需要修剪该空间并再次显示占位符。

我试过ng-trim但似乎没有用。关于如何解决这个问题的任何想法？

标签： angularjs

解决方案

您将需要一个自定义指令。它触发模糊并检查输入值。如果它只包含空格，那么它将清空该值。请注意，您将需要使用ng-model而不是ng-value：

myApp.directive('trimDir', function() {
    return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {

      element.bind('blur', function(e) {
        console.log(ctrl)
        let trimmed = ctrl.$viewValue.replace(/[\s]/g, '');
        if (trimmed.length == 0) {
          ctrl.$setViewValue('');
          ctrl.$render();
        }
      });
    }
  };

})

在html中：

<input type="text" 
       name="name" 
       ng-model="orderCommodity.name" 
       class="form-control top15" 
       placeholder="CERTIFICATION" 
       trim-dir />

在此处查看工作演示：DEMO

推荐阅读