angularjsはテキストボックスに大文字を強制します
大文字のフィルターを使用しようとしましたが、機能しません。私はそれを2つの方法で試しました：
<input type="text" ng-model="test" uppercase/>
そして
<input type="text" ng-model="{{test | uppercase}}"/>
2番目はjavascriptエラーをトリガーします。
構文エラー：トークン 'test'は予期しないもので、[：]が必要です
ユーザーがテキストボックスに入力するときに、テキストを強制的に大文字にする必要があります。
どうやってやるの？
以下の回答をご覧ください。これはこの回答よりも優れています。
この回答は、ここでの回答に基づいています： 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>誰かが既存の文字列の先頭に小文字を入力しようとすると、受け入れられた答えは問題を引き起こします。各キーを押すたびにカーソルが文字列の最後に移動します。すべての問題に対処する簡単なソリューションを次に示します。
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/
アイデアは、文字列をクライアント側で大文字で表示し（変換ではなく）、サーバー側で大文字に変換することです（ユーザーはクライアント側で何が起こるかをいつでも制御できます）。そう：
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の方法は必要ないと思います。
Ng-modelは割り当て可能である必要があるため、フィルターを作成できません。回避策は、パーサーまたは単にng-changeのいずれかです。
<input ng-model="some" ng-change="some = (some | uppercase)" />
これは動作するはずです。
Bootstrapで使用する場合は、text-uppercaseを入力のクラス属性に追加するだけです。
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/
モジュールに「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）{...}」未定義のエラーが発生しない場合
これはまったく機能しません。
ng-modelは、スコープのどのフィールド/プロパティをモデルにバインドするかを指定するためのものです。また、ng-modelは値として式を受け入れません。 angular.jsの式は{{と}}の間のことです
uppercaseフィルターは、出力および式が許可されるすべての場所で使用できます。
やりたいことはできませんが、CSSのtext-transformを使用して、少なくともすべてを大文字で表示できます。
テキストフィールドの値を大文字にする場合は、カスタムJavaScriptを使用してこれを実現できます。
コントローラーで：
$scope.$watch('test', function(newValue, oldValue) {
$scope.$apply(function() {
$scope.test = newValue.toUpperCase();
}
});
ブートストラップを使用する場合：
最初のアプローチ：text-uppercaseクラスの使用
<input type="text" class="text-uppercase" >
2番目のアプローチ：既存のクラスに適用できるスタイルを使用する
<input type="text" class="form-control" style="text-transform: uppercase;">
ここに私のstackBlitzがあります： https://angular-nvd7v6forceuppercase.stackblitz.io
これは単なる代替手段であり、cssでこの「text-transform：capitalize;」を使用すると、テキストエントリが大文字になります。ユーザーがどこでも大文字で入力しない限り。
それは単なる代替です^^
カーソルシフトを修正するソリューション
.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
}
};
});
Karl Zilles で答えを改善するために、これが彼のソリューションの私の改訂です。私のバージョンでは、プレースホルダーは大文字に変更されておらず、文字列で正規表現を実行する場合にも機能します。また、入力文字列の「タイプ」（ヌル、未定義、または空）も受け取ります。
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)));
}
}
}
});