Question

无论用户类型是什么，我如何强制“用户名”文字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>

Answer 1

CSS中的

：

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

否则在JS：

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

Answer 2

你必须使用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();
}

Answer 3

您可以使用

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

它应该适用于最新的浏览器有关详细信息，请查看此link

Answer 4

使用jquery，假设输入ID是用户名

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

Answer 5

这是我的建议，它基于@ fdiv-bug＆amp;的回答。 @阿里-sheikhpour：

为此字段添加text-transform: lowercase;。

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

在此字段上捕获“更改”事件，并通过（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());
    });
});

希望它对你有用。

Answer 6

@ fdiv_bug的答案很好，除了答案评论中提到的问题。使用输入事件而不是keyup事件为我修复了这些问题。

HTML：

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

使用Javascript：

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

Answer 7

改为使用 onchange

<input name="username"
  onchange="this.value = this.value.toUpperCase();"
  style="text-transform: lowercase; height:35px; width:300px"

  class="registerfont"
  type="text"
  id="username"
  maxlength="15"
>

Answer 8

我使用以下简单代码：

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

Answer 9

将每个人的答案结合在一起，可以简化事情。

使用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输入。

Answer 10

如果用户在其中粘贴内容，则

setInterval()将运行

setInterval(function(){
  let myinput = document.getElementById('myinput');
  //make lowercase
  myinput.value = myinput.value.toString().toLowerCase();
  //remove spaces (if you want)
  myinput.value = myinput.value.toString().replace(' ', '');
  //force specific characters
  myinput.value = myinput.value.toString().replace(/[^a-z0-9\/\-_]/, '');
}, 10);

因为这是一个使用.replace()的循环函数，一次只替换了第一次出现的事件，但是仍然循环所有这些事件，所以这似乎可以动画显示删除粘贴文本上的空格。

Answer 11

使用jquery假设输入的ID为用户名：

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

强制表单文本为小写

11 个答案: