2016-10-14 4 views
1

Используя одно текстовое поле ввода, а тип ввода допускает только алфавиты. Введенное значение - «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> 
+2

Вы не сформулировали вопрос. И ваша функция 'myFunction' никогда не вызывается, в которой ваша переменная' A' никогда не используется и в которой вы регистрируете константу. –

+0

@SaiKrishna не мой ответ решает вашу проблему? –

ответ

2

для того, чтобы показать значение входного сигнала с помощью обратной случае вам необходимо:

  1. Вызова вашей функции в onkeyup случае вашего входа, чтобы немедленно обновить предпросмотр с введенной строкой.

  2. И петля через строку и для каждого теста персонажа, если он находится в uppercase обратном его lowercase или сделать его uppercase, если это lowercase.

Вот Отрывок 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>

1

Вы можете использовать событие для обновления немедленно результат, во время записи.

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>

+0

Его хорошо ... предположим, что если мы вставим элемент «А» в текстовое поле ввода, тогда отобразится небольшое «а» и наоборот. –

+0

@SaiKrishna, см. Редактирование. –

Смежные вопросы