Question

我有这段代码可以自动填充文字。

我知道我可以为输入添加样式以使其显示为大写（style =＆＃34; text-transform：uppercase＆＃34;）

问题在于：它不会改为大写（DOM）

怎么做？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

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

1 个答案: