javascript - Angular js从输入文本框中删除前导和尾随空格

标签 javascript angularjs

查看这个 Plunkr:http://plnkr.co/edit/YAQooPn0UERDI5UEoQ23?p=preview

将文本键入“_______what___ever_____” (没有引号 & _ 代表空格。)

Angular 正在从模型中删除空格(从前面和后面而不是中间)(这是我想要的行为),但我的文本框保留了空格。

我怎样才能同时从文本框中删除空格?即我希望文本框也反射(reflect)模型中的值。

编辑:更好地解释我的需求。

例如: 如果我输入“___What_Ever____”(不带引号且 _ 是空格),

1) 我的文本框将显示我输入的内容,即“___What_Ever____”

2) 而我的模型会向我展示“What Ever”。

我希望我的文本框的值也为“What Ever”。

HTML :

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    <input type="text" ng-model="modelVal">
    <br>
    model value is "{{modelVal}}"
  </body>

</html>

JS :

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.modelVal="";

  })

最佳答案

这行得通吗? - Plunker

ng-blur 不适用于您的 Plunker,因为您加载的 AngularJS 版本 (1.0.7) 太旧了。我用最新版本(1.5.6)替换了它。我还使用 ng-trim="false" 来获取用户输入的正确文本。

标记

<body ng-controller="MyCtrl">
    <input type="text" ng-model="modelVal" ng-change="change()" ng-blur="blur()" ng-trim="false">
    <br>
    model value is "{{newModelVal}}"
</body>

JS

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.modelVal="";
    $scope.change = function () {
      $scope.newModelVal = $scope.modelVal;
    }
    $scope.blur = function () {
      $scope.modelVal = $scope.newModelVal.trim();
    }
  })

关于javascript - Angular js从输入文本框中删除前导和尾随空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40081052/

相关文章:

javascript - 联系表格在 iPhone 上无效

javascript - 如何将对象数组转换为 JSON(并返回它)?

javascript - 设置 addFromAutocompleteOnly 时,剩余文本留在输入字段中

javascript - 即使使用 JavaScript 函数,AngularJs 也无法对数组进行排序

javascript - 无法(仅)访问对象的某些属性 (JavaScript)

javascript - 在 ReactToPrint 中调整页面大小

javascript - 检测移动和桌面设备上的字符代码

javascript - 检查是否已选中每个字段集的一个单选按钮

javascript - Angular 观察对象不在范围内

javascript - 在 AngularJS ng-submit 中,如何在表单提交后绑定(bind) View ?