新手求助：如何在Javascript中实现输入文本实时大小写互转？

嘿，作为JavaScript新手能想到做实时大小写转换的需求真不错！这其实没那么复杂，我给你几种实用的实现方案，你可以根据自己的具体需求来选：

方案1：实时将输入转为大写 #

这个方案会把输入框里的所有内容实时转换成大写字母，代码简单易懂：

<input type="text" id="uppercaseInput" placeholder="输入内容自动转大写">

<script>
const input = document.getElementById('uppercaseInput');
input.addEventListener('input', function() {
  // 将当前输入值转为大写后重新赋值给输入框
  this.value = this.value.toUpperCase();
});
</script>

简单解释下：input事件会在输入框内容发生变化时立刻触发，toUpperCase()是JS字符串自带的方法，能把所有小写字母转成大写，把转换后的结果重新赋值给输入框，就实现了实时转换的效果。

方案2：实时将输入转为小写 #

和上面的逻辑完全一致，只是把转换方法换成toLowerCase()即可：

<input type="text" id="lowercaseInput" placeholder="输入内容自动转小写">

<script>
const input = document.getElementById('lowercaseInput');
input.addEventListener('input', function() {
  this.value = this.value.toLowerCase();
});
</script>

方案3：实时反转每个字符的大小写 #

如果你的需求是让每个字符的大小写互相切换（比如输入"AbCd"会变成"aBcD"），可以用这个方案：

<input type="text" id="toggleCaseInput" placeholder="输入内容自动反转大小写">

<script>
const input = document.getElementById('toggleCaseInput');
input.addEventListener('input', function() {
  // 把字符串拆成单个字符的数组，逐个判断并反转大小写
  this.value = this.value.split('').map(char => {
    return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
  }).join('');
});
</script>

这里的逻辑是：先用split('')把字符串拆成单个字符的数组，然后用map遍历每个字符——如果字符是大写就转成小写，反之转成大写，最后用join('')把数组重新拼成字符串，再赋值给输入框。

小提示：复用代码 #

如果需要给多个输入框添加这类功能，可以把逻辑封装成函数，这样复用起来更方便：

// 封装反转大小写的函数
function addToggleCaseFunctionality(inputId) {
  const input = document.getElementById(inputId);
  input.addEventListener('input', function() {
    this.value = this.value.split('').map(char => {
      return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
    }).join('');
  });
}

// 给指定ID的输入框添加功能
addToggleCaseFunctionality('myFirstInput');
addToggleCaseFunctionality('mySecondInput');

这些都是纯原生JavaScript实现的，不需要额外引入任何库，很适合新手学习和使用哦！

内容的提问来源于stack exchange，提问作者Gaurav