admin管理员组

文章数量:1426372

By using one input text box and the input type allows only alphabets.The value entered is 'a' and it should be display outside the textbox as 'A'?

If we enter the alphabet small 'a' on input text then it will wanted to display capital 'A' on the outside of the box... The following is my html code:

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

By using one input text box and the input type allows only alphabets.The value entered is 'a' and it should be display outside the textbox as 'A'?

If we enter the alphabet small 'a' on input text then it will wanted to display capital 'A' on the outside of the box... The following is my html code:

<!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>
  • javascript
  • html
  • string
Share Improve this question edited Oct 14, 2016 at 14:43 cнŝdk 32.2k7 gold badges60 silver badges80 bronze badges asked Oct 14, 2016 at 10:34 Sai KrishnaSai Krishna 592 silver badges7 bronze badges 2
  • 2 You did not formulate a question. And your function myFunction is never called, in which your variable A is never used and in which you log a constant string. – Peter B Commented Oct 14, 2016 at 10:38
  • @SaiKrishna doesn't my answer solve your problem? – cнŝdk Commented Oct 18, 2016 at 9:06
Add a ment  | 

3 Answers 3

Reset to default 2

To show the input value with case reversed you should:

  1. Call your function in the onkeyup event of your input to update the preview immediately with the inputted string.

  2. And loop through your string and for each character test if it's in uppercase reverse it to lowercase or make it uppercase if it's lowercase.

Here's a Snippet DEMO:

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>

You may use an event for immediatly update the result, while writing.

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>

function reverseCase(str) {
    let newstr = str.split('');
    let newarr = [];
    //return newstr;
    for(i=0; i<newstr.length; i++) {
        if(newstr[i] == newstr[i].toLowerCase()){
            newarr.push(newstr[i].toUpperCase());
        }else 
        if(newstr[i] == newstr[i].toUpperCase()){
            newarr.push(newstr[i].toLowerCase());
        }
    } return newarr.join('');
}
console.log(reverseCase("Happy Birthday"))

本文标签： javascriptReverse case (LowercaseUppercase) of an input value character by characterStack Overflow

版权声明：本文标题：javascript - Reverse case (LowercaseUppercase) of an input value character by character - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745425058a2658073.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。