Question

我很开心，我想建立一个以改变输入为开端的事件。输入中输入的文本将自动格式化如下：

第一个字母必须始终为大写;
所有其他字母必须小写。

function formating() {
  var nameOfPerson = document.getElementById("nameOfPerson").textContent;
  var nameOfPerson = nameOfPerson[0].toUpperCase() + (nameOfPerson - nameOfPerson[0]);
  document.getElementById("nameOfPerson").textContent = nameOfPerson;
}

<input type="text" id="nameOfPerson" onchange="formatting()" placeholder="type your name">

Answer 1

试试这个：

＆＃13;

function formatting() {
  var nameOfPerson = this.value;
  if (nameOfPerson.length > 0) {
    nameOfPerson = nameOfPerson[0].toUpperCase() + nameOfPerson.substr(1).toLowerCase();
    this.value = nameOfPerson;
  }
}

＆＃13;

<input type="text" id="nameOfPerson" onchange="formatting.call(this)" placeholder="type your name">

＆＃13;

Answer 2

如果你想用CSS做这个，那就是技巧：

＆＃13;

 <input type="text" id="nameOfPerson" placeholder="type your name" style="text-transform: capitalize;">

＆＃13;

CSS text-trasform媒体资源可以将您的输入文字更改为capitalize，lowercase和uppercase。

Answer 3

实现这一目标的一个简单方法是：

nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1);

什么时候做？

<强>模糊

当输入失去焦点（blur）事件时，您可以执行此操作。这将允许用户以任何格式输入，完成后，您将应用格式。

function formatting() {
  var nameOfPerson = this.value
  this.value = nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1).toLowerCase();
}

var input = document.getElementById("nameOfPerson");
input.addEventListener('blur', formatting)

<input type="text" id="nameOfPerson" placeholder="type your name">

<强>输入

或者您可以使用input事件强制执行格式设置。这将负责打字和粘贴操作。

function formatting() {
  var nameOfPerson = this.value
  this.value = nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1).toLowerCase();
}

var input = document.getElementById("nameOfPerson");
input.addEventListener('input', formatting)

<input type="text" id="nameOfPerson" placeholder="type your name">

<强>指针

避免在HTML中绑定处理程序。任何人都可以使用开发工具更改DOM并更改页面的行为。
textContent用于文本绑定，并将返回静态文本。输入具有值绑定，您应该使用.value
当您使用onclange="formatting()"时，处理程序将没有指向元素的上下文，您将不得不一次又一次地获取它并且DOM查询很昂贵。使用.addEventListener()将绑定上下文并且是首选，因为您可以添加多个处理程序。
在(nameOfPerson - nameOfPerson[0])中，-运算符会将值转换为数值，并会产生NaN。处理字符串时，请使用字符串帮助函数。

将输入文本格式设置为大写

3 个答案:

什么时候做？