Формат ввода текста, Jquery, Javascript или Css

0

В то время как ввод текста во входной строке Первая буква должна измениться на "Капитал", но буквы отдыха должны быть в нижнем регистре, даже пользовательские заглавные буквы должны изменить его в нижнем регистре.

Пример ввода слова: mOuSe, ComPuTER

Важный момент: при вводе текста он должен измениться на: мышь, компьютер

Я пробовал много решений Stackflow, но для выше логики я не нашел ни одного.

Использование Css: Нажмите здесь

Использование Javacript: Нажмите здесь (этот работал, но для последнего письма он не работает)

Любое решение принимается с использованием JQuery, Javascript или Css

$(document).ready(function() {
    //alert('ready');

  $('input').on('keypress', function(event) {
        var $this = $(this),
            val = $this.val();

        val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase();
        $this.val(val);
    });
});
  • 0
    Ваша JS скрипка (последняя) сработала для меня? В чем проблема для вас?
Теги:
validation
user-input

5 ответов

1

Используйте событие input вместо события keypress.

 $('input').on('input', function(event) {
Поделиться
  • 0
    Я думаю , что keyup событие лучше
  • 0
    keyup не сработает, если пользователь вставит в поле
Показать ещё 2 комментария
0

Может показаться интересным отметить, что CSS text-transform: capitalize; только изменяет отображение ввода, а Javascript изменяет фактическое значение HTML. Это имеет значение, если вход представляет собой, например, поле ввода CAPTCHA или поле ввода формы, которое должно быть проверено.

С чистым Javascript вы можете разделить вход на отдельные слова и преобразовать каждый из них, например:

HTML

<div id="transform">mOuSE, cOmPUTEr</div>
<button type="button">Capitalize</button>

JS

var rgx = /,/; /* word splitter, can be anything */
var target = document.getElementById('transform');
document.getElementsByTagName('button')[0].onclick = function() {
  var strArr = target.innerHTML.split(rgx); /* split the input */
  for (var word = 0; word < strArr.length; word++) { /* iterate over each word */
     strArr[word] = strArr[word].toLowerCase().trim(); 
     var firstLetter = strArr[word].substr(0,1).toUpperCase();
     var otherLetters = strArr[word].substr(1, strArr[word].length)
     strArr[word] = firstLetter+otherLetters;
  }
  target.innerHTML = strArr.join();
}

Демо: http://jsbin.com/farib/2/edit

NB: Если ваш вход находится в <textarea> или <input>, замените .innerHTML на .value.

Поделиться
0 
function initCap(t){    
t.value=t.value.toLowerCase();  
t.style='text-transform:capitalize;'
}

вызовите метод onkeypress и onblur

Поделиться
0

Попробуй это

$('input').on('keyup', function(event) {
    var firstchar = $(this).val().substring(0,1);
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase();
    $(this).val(firstchar + remainchar);
});
$('input').on('keydown', function(event) {
    var firstchar = $(this).val().substring(0,1);
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase();
    $(this).val(firstchar + remainchar);
});

DEMO

Поделиться
  • 0
    Это работает, но есть ошибка в браузере Chrome версии 34. Невозможно переместить стрелку влево и вернуться назад. В любом случае это решение также было полезным. Спасибо.
-1

Попробуйте это решение css.

DEMO

input {
    text-transform:capitalize;
    color: blue;
}


$(document).ready(function(){

    $("input").on("keypress",function(){

        $(this).val($(this).val().toLowerCase());

    });

})
Поделиться
  • 0
    Но остальные буквы должны быть в нижнем регистре при вводе даже вводимой пользователем заглавной буквы в середине введенного значения.
  • 0
    Да .. ты проверил демо ?? Результат приходит как этот "Bbbbbbb"
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню