如何在使用角度输入文本区域时将每个单词的首字母大写答案

【问题标题】：How to capitalize first letter of each word while typing in text area using angular如何在使用角度输入文本区域时将每个单词的首字母大写
【发布时间】：2018-01-21 09:32:29
【问题描述】：

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

我不想使用 CSS 样式“text-transformation:capitalize”，因为它在大写锁定打开时不起作用

【问题讨论】：

“大写锁定打开时不起作用”。所以你还想对每个单词的剩余字母强制小写？
是的，先生。因为当大写锁定打开时，上面的 css 属性不起作用

标签： javascript jquery html css angularjs

【解决方案1】：

使用框架 AngularJS，您可以创建一个 service FirstUppercaseService 以使其与大写锁定一起工作：

代码示例：

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>

【讨论】：

很高兴为您提供帮助。您应该为您的问题选择一个正确的答案

【解决方案2】：

这是一个简单的 JQuery 演示，可以帮助您：

$("#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>

【讨论】：

【解决方案3】：

最好在这里使用regex 进行大写 - /\b[a-z](?!\s)/g

请看下面的演示：

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

&lt;textarea&gt;&lt;/textarea&gt;

【讨论】：

@Varunverma 查看编辑后的答案，修复它:)

【解决方案4】：

可以用这个

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

在控制器中

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

或

$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();
    });

};

【讨论】：

嗨。我尝试了上述解决方案。但是当大写锁定打开时它不起作用。