我试过使用大写过滤器,但它不起作用。我尝试过两种方法:
<input type="text" ng-model="test" uppercase/>
和
<input type="text" ng-model="{{test | uppercase}}"/>
第二个触发javascript错误:
测试语法错误:标记‘
’不是预期的,而应为
我希望当用户在文本框中键入时,文本被强制为大写。
我该怎么做呢?
发布于 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>
发布于 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/
发布于 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方法对于您的情况是不必要的。
https://stackoverflow.com/questions/16388562
复制相似问题