Question

我正在尝试做我认为很简单的事情，但是我在使其工作上遇到困难。

我有一个带有一些输入字段的表格，在输入时需要将其转换为标题大小写（每个单词的首字母必须大写）。

我发现有一个函数可以执行此操作，但是它似乎在输入字段上不起作用。

我还发现了一些奇特的脚本，例如http://individed.com/code/to-title-case/，但我确实不需要太多。

如果真的很重要，我正在使用AngulasJS。

function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }

<div class="form">
    <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
   <label for="username"><span class="required">*</span>Username:</label>
   <input id="username" type="text" name="username" autofocus onchange="form.output.value=toTitleCase(this.value)" onkeyup="form.output.value=toTitleCase(this.value)">
   <input class="login" type="submit" value="Save">
   </form>
</div>

Answer 1

首先使用angularjs，对于其他事件，也应该使用ng-change而不是onchange。您可以通过以下方式简单处理

演示

var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope,$http){
});

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="HelloWorldCtrl">
     <input ng-model="some" ng-change="some = (some | uppercase)"  />
  </body>
</html>

Answer 2

输入字段的id为username，而不是output，因此

onchange="form.output.value=

失败。将对output的引用更改为对username的引用：

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}

<div class="form">
  <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
    <label for="username"><span class="required">*</span>Username:</label>
    <input id="username" type="text" name="username" autofocus onchange="form.username.value=toTitleCase(this.value)" onkeyup="form.username.value=toTitleCase(this.value)">
    <input class="login" type="submit" value="Save">
  </form>
</div>

更好的是，使用适当的事件侦听器：

const input = document.querySelector('#username');
const handler = () => {
  input.value = toTitleCase(input.value);
};
input.onchange = handler;
input.onkeyup = handler;

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}

<div class="form">
  <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
    <label for="username"><span class="required">*</span>Username:</label>
    <input id="username" type="text" name="username" autofocus>
    <input class="login" type="submit" value="Save">
  </form>
</div>

AngularJS：键入时将输入文本转换为小写字母

2 个答案: