CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Varun verma
Varun verma

Reputation: 189

How to capitalize first letter of each word while typing in text area using angular

<html>
<body ng-app="app">
  <div ng-controller="HelloController">
    Enter Text
    <input class="form-control" ng-model="inputString">     
  </div>    
</body>
<html>

I don't want to use CSS style "text-transformation:capitalize" because its not works when caps-lock is on

Upvotes: 2

Views: 1919

Answers (4)

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

With the framework AngularJS you can create a service FirstUppercaseService to make it work with caps-lock on or off:

Code example:

angular
  .module('App', [])
  .factory('FirstUppercaseService', function() {
    return function(str) {
      return str
        .toLowerCase()
        .replace(/\w+/g, function(s) {
          return s[0].toUpperCase() + s.slice(1);
        });
    };
  })
.controller('HelloController', ['$scope', 'FirstUppercaseService', 
  function ($scope, firstUppercaseService) {
    $scope.firstUppercase = function(str) {
      $scope.inputString = firstUppercaseService(str)
    };
  }]);
label, textarea {display: block;}
textarea {width: 300px; height: 80px; resize: vertical;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App" ng-controller="HelloController">
    <label for="input-string">Enter Text:</label>
    <textarea 
      id="input-string" 
      class="form-control" 
      ng-change="firstUppercase(inputString)" 
      ng-model="inputString">
    </textarea>
</div>

Upvotes: 2

Shaishab Roy
Shaishab Roy

Reputation: 16805

can use that 

<input class="form-control" ng-model="inputString" ng-change="capitalize(inputString)">

in controller 

$scope.capitalize = function(input) {
    input = input.toLowerCase();
    $scope.inputString = input.replace(/\b./g, function(m) {
        return m.toUpperCase();
    });
};

OR

$scope.capitalize = function(input) {
    input = input.replace(/\b./g, function(m) {
      return m.toUpperCase();
    });

    $scope.inputString = input.replace(/\B./g, function(m) {
      return m.toLowerCase();
    });

};

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

Better to use regex for capitalization here- /\b[a-z](?!\s)/g

See demo below:

document.querySelector("textarea").addEventListener('keyup', function(e) {
  this.value = this.value.toLowerCase().replace(/\b[a-z](?!\s)/g, function(x) {
    return x.toUpperCase();
  });
});
<textarea></textarea>

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Here is a simple demo, in JQuery, to help you:

$("#someId").on('keyup', function(e) {
  var arr = $(this).val().split(' ');
  var result = '';
  for (var x = 0; x < arr.length; x++)
    result += arr[x].substring(0, 1).toUpperCase() + arr[x].substring(1) + ' ';
  $(this).val(result.substring(0, result.length - 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="someId"></textarea>

Upvotes: 3

Related Questions