强制表单文本为小写

Forcing form text to be lower-case

本文关键字：文本 表单      更新时间：2023-09-26

无论用户类型如何，我如何强制"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>

要使它看起来像文本是小写的，在提交给服务器或复制粘贴时不改变实际字段的值，使用以下CSS:

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

如果你想在JavaScript中小写一个字符串，使用以下代码:

var text = "This Is My Text.";
var lowercase = text.toLowerCase();

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

要关闭移动浏览器虚拟键盘上单词的自动大写，使用以下代码:

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

它应该可以在最新的移动浏览器中工作。更多详细信息请查看此链接。

这不会阻止用户故意选择输入大写字母。

使用jquery假设输入ID是username这可以帮助:

脚注:感谢@ limm评论，我修改了原始答案，增加了两行，以防止光标不在结束位置时光标跳到输入的末尾。

$(document).ready(function(){
    $("#username").on('change keyup paste',function(e){
     
      //preserving the position of the cursor
      var start = e.target.selectionStart;
      
      //Converting text to lowercase
      $(this).val($(this).val().toLowerCase());
      
      //Jumping back to the old position of the cursor
      e.target.selectionStart = e.target.selectionEnd = start;
    })
})

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

HTML: 

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

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

结合每个人的答案来简化事情。

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

    这是我的建议，它是基于来自@fdiv-bug &@ali-sheikhpour:

    1. 添加text-transform:小写;
    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());
    });
});

    老问题。新答案。

    现在所有主流浏览器都支持HTML5表单验证(2021)，使用pattern属性在客户端输入字段上强制使用小写文本相对简单。(pattern属性在编写本文时，除了Opera Mini之外，其他所有版本都支持)。

    HTML: 

    <label>Field Name (lowercase letters only)</label>
<input type="text" pattern="[a-z]" placeholder="Field Name (lowercase letters only)">

    注意:下面的内容来自问题，但超出了问题的范围。

    在电子邮件地址字段上强制使用小写(这就是我遇到这个问题的原因)似乎更有风险，因为使用pattern/rejex来验证电子邮件地址相当复杂，并且与type="email"一起实现pattern存在潜在的问题。

    撇开上面的内容不谈，对于我的用例，下面的pattern就足够了:

    <label>Email Address (lowercase letters only)</label>
<input type="email" pattern="[^A-Z]+" placeholder="Email Address (lowercase letters only)">

    rejex表达式[^A-Z]+允许任何非大写字符。我通过type="email"将实际的电子邮件地址验证留给浏览器。我在Chrome、Firefox、Edge和IE11的台式机上测试了一下，结果都很好。

    我使用这个简单的代码:

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

    使用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"
>

    这个JavaScript将在用户输入文本时将文本转换为小写。它会记住光标的位置，以避免当用户在现有文本的中间输入一个字符时，光标被设置为结束。

    我还将autocapitalize设置为off，以便在移动浏览器的虚拟键盘上不会自动显示大写字母。

    var element = document.querySelector("input");
element.addEventListener('input', function(e) {
  const position = e.target.selectionStart;
  // Lowercase the text, which happens to also reset the selection:
  e.target.value = e.target.value.toLowerCase();
  // Restore the cursor position to where it was:
  e.target.setSelectionRange(position, position);
});
    <input type="text" autocapitalize="off">

    如果用户在

    中粘贴内容，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()的循环函数，每次只替换第一个出现，但仍然循环所有出现，这看起来像是动画删除粘贴文本上的空格。

    使用jquery假设输入ID是username:

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