输入文本：如何在 DOM 中强制大写？答案

【问题标题】：Input text: how to force uppercase in the DOM?输入文本：如何在 DOM 中强制大写？
【发布时间】：2018-10-01 15:23:13
【问题描述】：

我有这个代码来自动完成文本。

我知道我可以为输入添加样式以使其显示为大写 (style="text-transform:uppercase")

这个问题：它不会在下面（DOM）变成大写

如何做到这一点？

var name1 = document.getElementById('name');

name1.addEventListener('input', function() {
  var result = document.querySelector('.X');
  result.innerHTML = this.value;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>What is your name? </label><input type="text" id="name" style="text-transform:uppercase" />

<p>Your name is: <span class="X"></span></p>

【问题讨论】：

标签： html dom uppercase

【解决方案1】：

JavaScript 有自己的 toUpperCase() 方法，您可以使用：

var name1 = document.getElementById('name');

name1.addEventListener('input', function() {
  var result = document.querySelector('.X');
  result.innerHTML = this.value.toUpperCase();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>What is your name? </label><input type="text" id="name" style="text-transform:uppercase" />

<p>Your name is: <span class="X"></span></p>

或者您可以使用您在问题中提到的 CSS 文本转换并将其也应用于跨度：

var name1 = document.getElementById('name');

name1.addEventListener('input', function() {
  var result = document.querySelector('.X');
  result.innerHTML = this.value;
});

span.X {
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>What is your name? </label><input type="text" id="name" style="text-transform:uppercase" />

<p>Your name is: <span class="X"></span></p>

【讨论】：