文本框中的angularjs强制大写
文本框中的angularjs强制大写
提问于 2013-05-06 04:01:12
我试过使用大写过滤器，但它不起作用。我尝试过两种方法：
<input type="text" ng-model="test" uppercase/>和
<input type="text" ng-model="{{test | uppercase}}"/>第二个触发javascript错误：
测试语法错误:标记‘
’不是预期的，而应为
我希望当用户在文本框中键入时，文本被强制为大写。
我该怎么做呢？
回答 14
Stack Overflow用户
回答已采纳
发布于 2013-05-06 04:09:11
请看下面的另一个答案，它比这个答案更好。
这个答案基于这里的答案：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>
Stack Overflow用户
发布于 2014-09-24 02:15:49
如果有人试图在现有字符串的开头输入小写字母，则接受的答案会导致问题。每次按键后，光标将移动到字符串的末尾。这里有一个简单的解决方案，可以解决所有问题：
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/
Stack Overflow用户
发布于 2014-09-16 16:41:26
其想法是在客户端将字符串显示(而不是转换)为大写，在服务器端转换为大写(用户始终可以控制客户端发生的事情)。所以：
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方法对于您的情况是不必要的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16388562
复制相关文章
相似问题