1
最初の文章が終わってユーザがドット機能を押すと、最初の文字は大文字になりますが、2番目の機能が動作するようになると、AngularJSで各文の最初の文字を大文字にする
最初の文字の終わりの後、2番目の文字は、完全に動作する長い文字を書いた場合、どの文字がどれくらい前に押されたかによって異なります。
ここに完全なコードがあります。
var app = angular.module('myApp', [])
app
.directive('skywalker', function ($timeout) {
return {
link: function (scope, element, attrs, modelCtrl) {
var capitalize = function (sentence) {
if (typeof (sentence) === 'undefined' || sentence === null ||
sentence === '' || sentence.trim('') === '') { return sentence; }
var newSentence = sentence.substring(0, 1).toUpperCase() + sentence.substring(1, sentence.length);
var tempList = [];
var sondaNoktaVar = newSentence.substring(newSentence.length-1) === '.' ? true : false;
tempList = newSentence.split('.');
if (tempList.length > 1) {
var tempNewSentece = tempList[0];
if(tempList.length === 2 && tempList[tempList.length-1] === ''){
tempNewSentece = tempNewSentece + '.';
}
for (var e = 1; e < tempList.length; e++) {
if(tempList[e] !== ''){
var tempNewSenteceElma = angular.copy(tempList[e]);
tempNewSenteceElma = tempNewSenteceElma.trim('');
var elma = tempList[e].split(tempNewSenteceElma)
elma = elma[0];
tempNewSenteceElma = tempNewSenteceElma.substring(0, 1).toUpperCase() + tempNewSenteceElma.substring(1, tempNewSentece.length);
tempNewSentece = tempNewSentece +
(tempNewSentece.substring(6) === '.' ? '' : '.') +
elma +
tempNewSenteceElma;
}
}
newSentence = tempNewSentece + (sondaNoktaVar === true ? '.':'');
}
return newSentence;
};
element.on('keyup', function (ev) {
if (ev.shiftKey === true) {
}
else if (ev.which === 13 && ev.shiftKey === true) {
}
else if (ev.which === 13) {
}
else {
scope.newCommentContent = capitalize(scope.newCommentContent);
}
});
}
};
})
.controller('capitalizeController', [
'$scope' ,
function($scope) {
$scope.newCommentContent = '';
$scope.CommentList = [];
$scope.Clear = function(){
$scope.newCommentContent = '';
$scope.CommentList = [];
};
$scope.addNewComment = function (ev) {
if (ev.which === 13 && ev.shiftKey === true) {
return;
}
else if (ev.which === 13) {
if (typeof ($scope.newCommentContent) === 'undefined' || $scope.newCommentContent === null ||
$scope.newCommentContent === '' || $scope.newCommentContent.trim('') === '') { return; }
ev.preventDefault();
ev.stopPropagation();
var newComment = {
Id: ($scope.CommentList.length +1),
content: $scope.newCommentContent,
}
$scope.CommentList.push(newComment);
$scope.newCommentContent = '';
}
else if (ev.which === 27) {
ev.target.blur();
$scope.newCommentContent = '';
}
};
}]);
<!doctype html>
<html>
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
\t <script src="myCtrl.js"></script>
\t \t <head>
\t \t \t <meta charset="UTF-8">
\t \t \t <title>control</title>
\t \t \t <style>input.ng-invalid{border:1px sloid red;}</style>
\t \t </head>
\t \t
\t \t <body ng-app="myApp">
\t \t \t <br>
\t \t \t <div ng-controller="capitalizeController"
\t \t \t style="border:1px solid red; padding:10px">
\t \t \t \t \t \t <br>
\t \t \t \t \t \t Test <span style="color:blue; cursor:pointer;" ng-click="Clear()">Clear</span>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <div ng-repeat="comment in CommentList track by comment.Id"
\t \t \t \t \t \t style="border: 1px solid gray;padding: 5px;width: 300px;margin: 5px;">
\t \t \t \t \t \t \t \t {{comment.content}}
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <br/>
\t \t \t \t \t \t <textarea skywalker
\t \t \t ng-attr-placeholder="'Write a comment and press enter'}}"
\t \t \t spellcheck="false"
\t \t \t ng-model="newCommentContent"
\t \t \t ng-keydown="addNewComment($event)"
\t \t \t class="ca-field" style="height: 100px;width:300px"></textarea>
\t \t \t </div>
\t \t </body>
</html>