使用 jQuery,如何在用户仍在编辑该字段时将文本字段的第一个字母大写?

IT技术 javascript jquery capitalization
2021-02-25 08:38:15

我正在寻找一个示例,说明如何将输入到文本字段中的字符串的第一个字母大写。通常,这是使用函数、正则表达式OnBlurOnChange、 等在整个字段上完成的。我想在用户仍在键入时将第一个字母大写

例如,如果我输入“cat”这个词,用户应该按“c”,然后当他按“a”时,C 应该在字段中大写。

我认为我的目标可能是keyup或者keypress但我不确定从哪里开始。

有人有我的例子吗?

6个回答

只需使用 CSS。

.myclass 
{
    text-transform:capitalize;
}
是的,这就是我的意思,OP 只想大写整个字段的第一个单词。
2021-04-15 08:38:15
@Kaleb 'capitalize' 值将每个单词的第一个字符大写。w3schools.com/Css/pr_text_text-transform.asp
2021-04-20 08:38:15
这种大写只会改变可视化,后端将在输入时接收输入。这可能会导致意外出现小写的相同文本。
2021-04-26 08:38:15
在 Google Chrome 中 - 这仍将允许输入所有大写字母。需要 JS 才能将其转换为 Sentence Case。
2021-05-01 08:38:15
这将大写每个单词。
2021-05-11 08:38:15

这将简单地转换您文本的第一个字母:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);

这应该是公认的答案,因为如果您将其用作后端的输入,这实际上会修改用户输入。
2021-04-15 08:38:15
简单又甜蜜。在我的情况下帮助了我:)
2021-04-16 08:38:15
这应该是公认的答案;当前接受的答案只是一种解决方法。
2021-04-22 08:38:15
接受的答案需要创建 <tag> 并添加 .class; 这个不需要!
2021-05-01 08:38:15

我在别处回答了这个问题。但是,这里有两个您可能想要在 keyup 事件上调用的函数。

将第一个单词大写

  function ucfirst(str,force){
          str=force ? str.toLowerCase() : str;
          return str.replace(/(\b)([a-zA-Z])/,
                   function(firstLetter){
                      return   firstLetter.toUpperCase();
                   });
     }

并将所有单词大写

function ucwords(str,force){
  str=force ? str.toLowerCase() : str;  
  return str.replace(/(\b)([a-zA-Z])/g,
           function(firstLetter){
              return   firstLetter.toUpperCase();
           });
}

正如@Darrell 建议的那样

$('input[type="text"]').keyup(function(evt){

      // force: true to lower case all letter except first
      var cp_value= ucfirst($(this).val(),true) ;

      // to capitalize all words  
      //var cp_value= ucwords($(this).val(),true) ;


      $(this).val(cp_value );

   });

希望这有帮助

干杯:)

您不应该在 ascii 字符上使用正则表达式,而应该始终将第一个字母大写。
2021-04-22 08:38:15
这将大写来自外国字符的下一个字母,例如波兰语 ł ę ą 等。 "małopolska" = "MałOpolska"
2021-04-29 08:38:15
最好使用最佳实践.blur(),否则用户无法使用Ctrl+A来全选。
2021-05-02 08:38:15
$('input[type="text"]').keyup(function(evt){
    var txt = $(this).val();


    // Regex taken from php.js (http://phpjs.org/functions/ucwords:569)
    $(this).val(txt.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});
仅供参考,此脚本将阻止您的用户在文本框中使用光标键。
2021-05-08 08:38:15

带有“文本转换:大写;”的 CSS 解决方案 如果您想在后端使用输入的内容,那就不好了。您仍将按原样接收数据。JavaScript 解决了这个问题。

JQuery 插件结合了前面提到的一些技术,加上连字符后的单词大写,即:“Tro Lo-Lo”:

添加到您的脚本中:

jQuery.fn.capitalize = function() {
    $(this[0]).keyup(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var stringStart = box.selectionStart;
        var stringEnd = box.selectionEnd;
        $(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
            return $word.toUpperCase();
        }));
        box.setSelectionRange(stringStart , stringEnd);
    });

   return this;
}

然后只需将大写()附加到任何选择器:

$('#myform input').capitalize();
我认为这应该是这个问题的答案,因为 css 解决方案只是一种表示。
2021-05-02 08:38:15