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

Question

我正在寻找一个如何大写输入文本字段的字符串的第一个字母的示例.通常情况下,这是与功能,正则表达式整场完成的,OnBlur,OnChange等我想首字母大写,而用户仍然打字.

例如,如果我输入单词"cat",则用户应按"c",然后在按下"a"时,C应该在字段中大写.

我想我要为可能可以用keyup或keypress,但我不知道从哪里开始.

有人给我一个例子吗？

Answer 1

只需使用CSS.

.myclass 
{
    text-transform:capitalize;
}

Answer 2

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

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

Answer 3

我在其他地方回答了这个问题.但是,这里有两个您可能想要在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 );

   });

希望这是有帮助的

干杯:)

Answer 4

$('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( ); }));
});

Answer 5

带有"text-transform:capitalize;"的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;
}

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

$('#myform input').capitalize();

Answer 6

我使用了@Spajus的代码并编写了一个更加扩展的jQuery插件.

我写了这四个jQuery函数:

• upperFirstAll() 大写输入字段中的所有单词
• upperFirst() 仅将第一个词大写
• upperCase() 将孔文本转换为大写
• lowerCase() 将孔文本转换为小写

您可以像使用任何其他jQuery函数一样使用和链接它们:
$('#firstname').upperFirstAll()

我完整的jQuery插件:

(function ($) {
    $.fn.extend({

    // With every keystroke capitalize first letter of ALL words in the text
    upperFirstAll: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)(.)/g,
            function(c) {
                return c.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // With every keystroke capitalize first letter of the FIRST word in the text
    upperFirst: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase().replace(/^(.)/g,
            function(c) {
                return c.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // Converts with every keystroke the hole text to lowercase
    lowerCase: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase());
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // Converts with every keystroke the hole text to uppercase
    upperCase: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toUpperCase());
            box.setSelectionRange(start, end);
        });
        return this;
    }

    });
}(jQuery));

Groetjes :)

Answer 7

使用jQuery时我个人最喜欢的是简短而甜蜜的:

function capitalize(word) {
   return $.camelCase("-" + word);
}

有一个jQuery插件也可以做到这一点.我会称之为... jCap.js

$.fn.extend($, { 
    capitalize: function() {
        return $.camelCase("-"+arguments[0]); 
    } 
});

Answer 8

 $("#test").keyup(
     function () {
         this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
     }
 );

Answer 9

稍微更新上面的代码,以强制字符串在Capitaliing第一个字母之前降低.

(两者都使用Jquery语法)

    function CapitaliseFirstLetter(elemId) {
        var txt = $("#" + elemId).val().toLowerCase();
        $("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
        return $1.toUpperCase(); }));
        }

另外还有一个大写WHOLE字符串的函数:

    function CapitaliseAllText(elemId) {
         var txt = $("#" + elemId).val();
         $("#" + elemId).val(txt.toUpperCase());
         }

在文本框的单击事件上使用的语法:

    onClick="CapitaliseFirstLetter('myTextboxId'); return false"

Answer 10

这将帮助您 - 将每个单词的第一个字母转换为大写

<script>
  /* convert First Letter UpperCase */
  $('#txtField').on('keyup', function (e) {
    var txt = $(this).val();
    $(this).val(txt.replace(/^(.)|\s(.)/g, function ($1) {
      return $1.toUpperCase( );
    }));
  });
</script>

示例：这是一个标题案例句子 -> 这是一个标题案例句子