Форсирование текста формы в нижнем регистре

Как я могу заставить текст в тексте "username" input быть строчным, независимо от того, какие типы пользователей?

<div class="register">
   <label for="username">Select username:</label>
</div> 
<div class="registerform">
    <input name="username" class="registerfont" type="text"
           id="username" maxlength="15" style="height:35px; width:300px">
</div>

Ответы

Ответ 1

Вы должны использовать javascript. У меня есть пример здесь: http://jsfiddle.net/xCfdS/3/

HTML: <input type="text" id="txt" onkeyup="return forceLower(this);"/>

JavaScript:

function forceLower(strInput) 
{
strInput.value=strInput.value.toLowerCase();
}

Ответ 2

в CSS:

form input[type="text"] {
    text-transform: lowercase;
}

в противном случае в JS:

var text="this is my text.";
var lowercase=text.toLowerCase();

Ответ 3

Вы можете использовать что-то как

<input autocapitalize="none" ></input>

и он должен работать в последних браузерах Для более подробной информации проверьте эту ссылку link

Ответ 4

Использование jquery в предположении, что идентификатор ввода - это имя пользователя

$(document).ready(function(){
    $("#username").on('change keyup paste',function(){
    $(this).val($(this).val().toLowerCase());
     })
})

Ответ 5

Это мое предложение, основанное на ответе от @fdiv-bug и @ali-sheikhpour:

Добавьте text-transform: lowercase; для этого поля.

input[type="email"] {
    text-transform: lowercase;
}

поймать событие "change" в этом поле и преобразовать значение в нижний регистр с помощью функции (String) toLowerCase.

var upperCaseMatch = /[A-Z]/;
var events = {
    CHANGE: 'change'
};

$(function() {
    $(document).on('change', 'input[type="email"]', function() {
        var value = $(this).val();
        if (!upperCaseMatch.test(value)) {
            return;
        }
        $(this).val(value.toLowerCase());
    });
});

Надеюсь, что это будет полезно для вас.

Ответ 6

Ответ @fdiv_bug хорош, за исключением вопросов, упомянутых в комментариях к их ответу. Использование события ввода вместо события keyup устранило эти проблемы для меня.

HTML:

<input oninput="this.value=this.value.toLowerCase()"/>

Javascript:

element.addEventListener('input',function(){this.value=this.value.toLowerCase()});

Ответ 7

Я использую этот простой код:

<input type="text" onkeyup="this.value = this.value.toUpperCase();">

Ответ 8

Совмещая немного ответов каждого, здесь все упрощается.

Используйте CSS, чтобы избежать перепрошивки и для отображения.
```
input[type="username"] {
  text-transform: lowercase;
}
```

Теперь, поскольку это влияет ТОЛЬКО на ОТОБРАЖЕНИЕ текста в браузере, нам также необходимо изменить значение ввода.

Добавьте прослушиватель событий на вход.

const usernameInput = document.querySelector('input[type="username"]');
usernameInput.addEventListener("input", function(e){
  e.target.value = e.target.value.toLowerCase();
});

Мы можем отправить это серверу, как обычно, и, как уже упоминали другие, проверить на стороне сервера, чтобы убедиться, что злоумышленник не отправил нам входные данные UpPPercaSe.