angularjs在文本框中强制大写
Posted
技术标签:
【中文标题】angularjs在文本框中强制大写【英文标题】：angularjs force uppercase in textbox 【发布时间】：2013-04-29 14:34:34 【问题描述】：我尝试过使用大写过滤器，但它不起作用。我尝试了两种方法：
<input type="text" ng-model="test" uppercase/>
和
<input type="text" ng-model="test | uppercase"/>
第 2 次触发 javascript 错误：
语法错误：令牌“测试”是意外的，应为 [:]
我希望当用户在文本框中键入时，文本被强制为大写。
我该怎么做？
【问题讨论】：
【参考方案1】：如果要更改模型和值，请使用：
angular.module('MyApp').directive('uppercased', function()
return
require: 'ngModel',
link: function(scope, element, attrs, ngModel)
element.bind("blur change input", function ()
ngModel.$setViewValue($(this).val().toUpperCase());
$(this).val($(this).val().toUpperCase());
);
element.css("text-transform","uppercase");
;
);
然后将大写添加到您的html输入文本中
<input type="text" uppercased />
【讨论】：
【参考方案2】：使用引导程序时： 第一种方法：使用类 text-uppercase
<input type="text" class="text-uppercase" >
第二种方法：使用可以与现有类一起应用的样式
<input type="text" class="form-control" style="text-transform: uppercase;">
这是我的 stackBlitz：https://angular-nvd7v6forceuppercase.stackblitz.io
【讨论】：
【参考方案3】：光标移位修复的解决方案
.directive('titleCase', function ()
return
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl)
var titleCase = function (input)
let first = element[0].selectionStart;
let last = element[0].selectionEnd;
input = input || '';
let retInput = input.replace(/\w\S*/g, function (txt) return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); );
if (input !== retInput)
modelCtrl.$setViewValue(retInput);
attrs.ngModel = retInput;
modelCtrl.$render();
if (!scope.$$phase)
scope.$apply(); // launch digest;
element[0].selectionStart = first;
element[0].selectionEnd = last;
return retInput;
;
modelCtrl.$parsers.push(titleCase);
titleCase(scope[attrs.ngModel]); // Title case initial value
;
);
【讨论】：
【参考方案4】：请看下面的另一个答案，比这个更好。
此答案基于此处的答案：How to autocapitalize the first character in an input field in AngularJS?。
我想你想要的是这样的解析器函数：
angular
.module('myApp', [])
.directive('capitalize', function()
return
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl)
var capitalize = function(inputValue)
if (inputValue == undefined) inputValue = '';
var capitalized = inputValue.toUpperCase();
if (capitalized !== inputValue)
// see where the cursor is before the update so that we can set it back
var selection = element[0].selectionStart;
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
// set back the cursor after rendering
element[0].selectionStart = selection;
element[0].selectionEnd = selection;
return capitalized;
modelCtrl.$parsers.push(capitalize);
capitalize(scope[attrs.ngModel]); // capitalize initial value
;
);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="name" capitalize>
</div>【讨论】：
完美，这就是我所需要的。我没有看到这个例子。我认为大写过滤器对我来说有点误导......谢谢 这是一个方便的指令！但是，如果您在调用方法之前测试 inputValue 的存在可能会有所帮助。 将 push(capitalize) 更改为 unshift(capitalize)，但除此之外它工作正常。谢谢。 +1 我被困了一个多小时，试图弄清楚为什么$parsers 和 $formatters 没有更新输入控件。将调用添加到 $setViewValue 和 $render 就可以了。我将要求 Angular 团队将此添加到文档中。
您可以在渲染之前存储输入的 selectionStart 并在渲染之后重置，因此每次按键后光标不会移动到字符串的末尾。 var selection = element[0].selectionStart; modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); element[0].selectionStart = selection; element[0].selectionEnd = selection; 【参考方案5】：
如果有人试图在现有字符串的开头输入小写字母，则接受的答案会导致问题。每次按键后光标移动到字符串的末尾。这是一个解决所有问题的简单解决方案：
directive('uppercased', function()
return
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl)
modelCtrl.$parsers.push(function(input)
return input ? input.toUpperCase() : "";
);
element.css("text-transform","uppercase");
;
)
这是一个小提琴： http://jsfiddle.net/36qp9ekL/1710/
【讨论】：
需要注意的是 CSS text-transform 只是将屏幕上的文本变成大写，而绑定到模型的值不是。虽然接受的答案可能会产生其他意想不到的后果（例如光标撞到末尾），但这也可能会产生，具体取决于要求。 模型绑定的值被$parser大写。还是您指的是输入元素的 value 属性？在这种情况下你是对的。 啊 - 不一定是指那个，并且以某种方式错过了解析器。我略读了您的示例，然后我的注意力立即集中在应用于元素的文本转换上。我会因为略读而不是阅读而拍自己的手:) 如果我错了，请纠正我，但我认为$(element) 和 element 是等价的。
请参阅this answer 以保持占位符不变【参考方案6】：
您不能对 ng-model 进行过滤，因为它必须是可分配的。解决方法是解析器，或者只是 ng-change。
<input ng-model="some" ng-change="some = (some | uppercase)" />
这应该可行。
【讨论】：
完美运行 目前为止对我来说最好的解决方案！ 我会选择这个作为解决方案。传递给后端的简单值和值也是大写的。【参考方案7】：我只会在控制器中使用过滤器本身：
$filter('uppercase')(this.yourProperty)
请记住，例如，如果您要在控制器中使用它，则需要注入此过滤器：
app.controller('FooController', ['$filter', function($filter) ...
【讨论】：
【参考方案8】：为了改进Karl Zilles 的答案，这是我对他的解决方案的修改。 在我的版本中，占位符不会更改为大写，如果您想对字符串执行正则表达式，也可以使用。它还采用输入字符串的“类型”（null 或 undefined 或空）：
var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function()
return
require: 'ngModel',
link: function(scope, elm, attrs, ctrl)
ctrl.$validators.cf = function(modelValue, viewValue)
ctrl.$parsers.push(function(input)
elm.css("text-transform", (input) ? "uppercase" : "");
return input ? input.toUpperCase() : input;
);
return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
);
【讨论】：
【参考方案9】：one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>
just do below 2 line code in your js file,
$scope.upper = function(test)
$scope.test = test.toUpperCase();
这是我的小提琴http://jsfiddle.net/mzmmohideen/36qp9ekL/299/
【讨论】：
这个解决方案非常棒 - 只是它需要的几行代码。它似乎取消了我用来使用正则表达式验证 MAC 地址的ng-pattern。关于如何让两者都工作的任何想法？ jsfiddle.net/630dkL15
我听不懂你的问题...你的输入是大写的，你要把它与 mac_regex 进行比较，对吗？并且在您的 jsfiddle 中找到了一个外部链接，它描述了给定文本的大写，而绑定不用于 ng-model 或运行时输入。这将适用于将在其中绑定的角度输出
jsfiddle.net/mzmmohideen/oqzs0w8m 这是我的 JSFIDDLE ，这里当你正确输入 mac 地址意味着它显示正确，否则它返回 false 并且不用担心小写，当你最后输入 mac 正确时它会变成大写案例
@SpaceNinja 你得到你想要的了吗？
我喜欢您的解决方案，如果我找不到将用户类型大写而不是在最后进行验证时大写的解决方案，我可以使用它。我希望看看 ng-pattern 和 ng-change 的冲突是什么问题 - jsfiddle.net/rod9pLom/3【参考方案10】：
这只是一种选择，你可以在你的css中使用这个“text-transform:capitalize;”，文本条目将被大写。除非用户在任何地方都用大写字母输入。
这只是一种选择^^
【讨论】：
【参考方案11】：与 Bootstrap 一起使用时，只需将text-uppercase 添加到输入的类属性即可。
【讨论】：
你可以添加这个然后：::-webkit-input-placeholder text-transform: none; ::-moz-placeholder text-transform: none; :-ms-input-placeholder text-transform: none; input:-moz-placeholder text-transform: none; 。如果需要，将.text-uppercase 添加到此类。
它在用户界面上工作，但模型值仍然是小写
如果要将模型更改为大写，则需要使用模型控制器的 $parsers ，如上所述。此解决方案仅是可视的。
您可以将引导类用于视觉目的，并在您的控制器中，在使用模型之前使用 toUperCase() 函数【参考方案12】：
这个想法是在客户端将字符串显示（而不是转换）为大写，并在服务器端转换为大写（用户始终可以控制在客户端发生的情况）。所以：
1) 在 html 中：
<input id="test" type="text" ng-model="test">
这里没有大写转换。
2) 在css中：
#test text-transform: uppercase;
数据显示为大写，但实际上仍为小写，如果用户输入的是小写。 3) 插入数据库时，在服务器端将字符串转为大写。
= = = = = 玩玩的可以关注一下：
<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">
但我认为您的情况不需要 ng-change 或 ng-blur 方式。
【讨论】：
现在这个工作很简单！所以这是最好的事情！ :) 谢谢 P.S 我也使用了 ng-keydown 来确保用户更快地看到魔法:)【参考方案13】：不要忘记在您的模块中包含“ngSanitize”！
app.directive('capitalize', function()
return
restrict: 'A', // only activate on element attribute
require: '?ngModel',
link : function(scope, element, attrs, modelCtrl)
var capitalize = function(inputValue)
if(inputValue)
var capitalized = inputValue.toUpperCase();
if (capitalized !== inputValue)
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
return capitalized;
;
modelCtrl.$parsers.push(capitalize);
capitalize(scope[attrs.ngModel]); // capitalize initial value
;
);
注意“？”在 "require: '?ngModel',"... 只有这样我的应用程序才能工作。
"if(inputValue) ..." 因为没有发生未定义的错误
【讨论】：
【参考方案14】：这根本行不通。
ng-model 用于指定范围中的哪个字段/属性应绑定到模型。此外，ng-model 不接受表达式作为值。 angular.js 中的表达式介于 和 之间。
uppercase 过滤器可用于输出和任何允许表达式的地方。
你不能做你想做的事，但你可以使用 CSS 的 text-transform 至少以大写显示所有内容。
如果您想将文本字段的值设为大写字母，您可以使用一些自定义 JavaScript 来实现。
在您的控制器中：
$scope.$watch('test', function(newValue, oldValue)
$scope.$apply(function()
$scope.test = newValue.toUpperCase();
);
【讨论】：
好答案，我会选择 GHC，因为它更接近我想要的（在视图中使用属性）以上是关于angularjs在文本框中强制大写的主要内容，如果未能解决你的问题，请参考以下文章