Question

使用一个输入文本框，输入类型只允许输入字母。输入的值是'a'，它应该在文本框外面显示为'A'？

如果我们在输入文本上输入小字母'a'，那么它就会想要在框外显示大写'A'... 以下是我的HTML代码：

<!DOCTYPE html>
   <html>
      <head>
         <!--<script type="text/javascript" href="check.js"></script>-->
      </head>
        <body>
          <input type="text">
             <script>
                function myFunction()
                {
                    var A = document.getElementById('input').value; 
                    console.log('alphabet'.toUpperCase());
                }
             </script>
       </body>
    </html>

Answer 1

要显示案例反转的输入值，您应该：

在输入的redirectTo事件中调用您的函数，以使用输入的字符串立即更新预览。
循环遍历字符串并进行每个字符测试（如果存在） onkeyup将其反转为uppercase或将其lowercase转换为uppercase lowercase。

这是一个片段演示：

function myFunction() {
  var A = document.getElementById('input').value;
  var output = '';
  for (var i = 0, len = A.length; i < len; i++) {
    var character = A[i];
    if (character == character.toLowerCase()) {
      // The character is lowercase
      output = output + character.toUpperCase();
    } else {
      // The character is uppercase
      output = output + character.toLowerCase();
    }
  }
  document.getElementById("preview").innerText = output;
}

<input id="input" type="text" pattern="[A-Za-z]" onkeyup="myFunction()" /><span id="preview"></span>

Answer 2

在写作时，您可以使用事件立即更新结果。

document.getElementById('input').addEventListener('keyup', function () {
    var input = document.getElementById('input').value;
    if (!input.match(/^[a-z]*$/i)) {
        document.getElementById('output').innerHTML = 'Wrong input';
        return;
    }
    document.getElementById('output').innerHTML = input.split('').map(function (a) {
        return a.match(/[a-z]/)  ? a.toUpperCase() : a.toLowerCase();
    }).join('');
});

<input type="text" id="input">
<div id="output"></div>

逐个字符地反转输入值的大小写（小写/大写）

2 个答案: