A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本文源自笔者在开发过程中遇到的一个小问题,特此记录。

问题很简单:在angularjs环境下,textarea中的内容起始的空格和换行会被自动裁剪。下面上代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app="myApp" ng-controller="myCtrl">    <textarea ng-model="data" id="check"></textarea>    <button type="button" ng-click="submit()">submit</button></body></html><script>    var app = angular.module('myApp', []);    app.controller('myCtrl',        ['$scope', function($scope) {            $scope.data = "";            $scope.submit = function () {                console.log("data is ---" + document.getElementById("check").value + "---");                console.log("$scope.data is ---" + $scope.data + "---");            };    }]);</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

在textarea中输入” 123”,在控制台会打印如下结果:

可以看到angular环境下取到的值前面的空格都被裁剪了(同理,换行也会被裁剪)。

解决方法很简单,在textarea标签里加上ng-trim=”false”就可以了,这是因为angular会默认清理字符串中的空白信息,所以需要显示声明ng-trim=“false“来禁用这个默认动作。

更新后的textarea部分代码:

<textarea ng-model="data" id="check" ng-trim="false"></textarea>
  • 1

再看一下在textarea中输入” 123”控制台的打印结果:

此时angular环境下取到的值前面的空格没有被裁剪(同理,换行也不会被裁剪)。


1 个回复

倒序浏览
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马