如何preserve开头和结尾的空白使用输入标签是什么时候？ [英] How do preserve leading and trailing whitespace when using an input tag?

问题描述

我与角玩，写一个正则表达式测试仪。
问题是前导空格修剪，当我输入数据。见例如的jsfiddle这里：

所以，当页面加载我有正则表达式^ \\ D + $测试（123），这将导致不匹配，但如果你输入一个额外的主导，或在候选框尾随空格：

1. 开头和结尾的空格从我的变量
删除

2. 结果变化匹配

下面是我的HTML：

 ＆LT; D​​IV ID ='NG：应用类='NG-应用：对myApp'NG-应用='对myApp'＆GT;
    ＆LT; D​​IV NG控制器=控制器＆GT; {{addTodo2（）}}
        ＆LT;形式的novalidate类=简单形式＆GT;模式：
            ＆LT;输入类型=文本NG模型=模式/＆GT;候选人：
            ＆LT;输入类型=文本NG模型=候选人/＆GT;
            ＆LT; BR />.{{candidate}}。
            ＆LT; BR＆GT; {{候选设备Candidate2}}＆LT; /表及GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

这里是相关联的JavaScript：

 功能控制器（$范围）{
    $ scope.pattern =^ \\\\ D + $;
    $ scope.candidate =123;
    $ scope.candidate2 =123;
    $ scope.addTodo2 =功能（）{
        无功海峡=JavaScript是一种有趣的脚本语言;
        VAR重=新的RegExp（$ scope.pattern，G）;        VAR的结果= re.test（$ scope.candidate）;
        如果（结果）{
            返回Match22
        }其他{
            返回无Match22
        };
    };  }
VAR的myapp = angular.module（'对myApp'，[]）;
 

解决方案

更​​新了小提琴，增加NG-修剪=false以输入标签

http://jsfiddle.net/T2zuV/12/

 ＆LT; D​​IV ID ='NG：应用类='NG-应用：对myApp'NG-应用='对myApp'＆GT;
    ＆LT; D​​IV NG控制器=控制器＆GT; {{addTodo2（）}}
        ＆LT;形式的novalidate类=简单形式＆GT;模式：
            ＆LT;输入类型=文本NG模型=模式NG-修剪=FALSE/＆GT;候选人：
            ＆LT;输入类型=文本NG模型=候选人NG-修剪=FALSE/＆GT;
            ＆LT; BR />.{{candidate}}。
            ＆LT; BR＆GT; {{候选设备Candidate2}}＆LT; /表及GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

I am playing with Angular and writing a Regex tester. Problem is leading whitespace is trimmed when I enter data. See example jsfiddle here:

So when the page loads I have the RegEx "^\d+$".test(" 123 ") which results in "No Match", But if you enter an extra leading or trailing space in the Candidate box:

1. The leading and trailing spaces are removed from my variable
2. The result changes "Match"

Here is my HTML:

<div id='ng:app' class='ng-app: myApp' ng-app='myApp'>
    <div ng-controller="Controller">{{addTodo2()}}
        <form novalidate class="simple-form">Pattern:
            <input type="text" ng-model="pattern" />Candidate:
            <input type="text" ng-model="candidate" />
            <br />.{{candidate}}.
            <br>.{{candidate2}}.</form>
    </div>
</div>

And here is the associated JavaScript:

function Controller($scope) {
    $scope.pattern = "^\\d+$";
    $scope.candidate  = " 123 ";
    $scope.candidate2 = " 123 ";
    $scope.addTodo2 = function () {
        var str = "Javascript is an interesting scripting language";
        var re = new RegExp($scope.pattern, "g");

        var result = re.test($scope.candidate);
        if (result) {
            return "Match22";
        } else {
            return "No Match22";
        };
    };

  }
var myapp = angular.module('myApp', []);

解决方案

Updated the fiddle, added ng-trim="false" to the input tags

http://jsfiddle.net/T2zuV/12/

<div id='ng:app' class='ng-app: myApp' ng-app='myApp'>
    <div ng-controller="Controller">{{addTodo2()}}
        <form novalidate class="simple-form">Pattern:
            <input type="text" ng-model="pattern" ng-trim="false"/>Candidate:
            <input type="text" ng-model="candidate" ng-trim="false"/>
            <br />.{{candidate}}.
            <br>.{{candidate2}}.</form>
    </div>
</div>

这篇关于如何preserve开头和结尾的空白使用输入标签是什么时候？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！