angularjs下textarea内容被自动裁剪的问题

Myth丶恋晨 2022-05-20 09:34 115阅读 0赞

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

问题很简单：在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>

在textarea中输入” 123”，在控制台会打印如下结果：  
![这里写图片描述][20180716183155132]

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

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

更新后的textarea部分代码：

再看一下在textarea中输入” 123”控制台的打印结果：  
![这里写图片描述][20180716183946982]

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

[20180716183155132]: /images/20220520/bfe5b73b0dc141bd88375a784fc8f4e8.png
[20180716183946982]: /images/20220520/78188493d5f84966ad458b20b03b969e.png