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

CSS解决方案“text-transform：capitalize;”如果你想在后端使用输入的内容是不好的。您仍将按原样接收数据。 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

稍微更新上面的代码，以便在首字母大写之前强制字符串降低。

（两者都使用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

我的抱歉。由于我匆忙而草率，语法不对。你去......

     $('#tester').live("keyup", function (evt)
        {
            var txt = $(this).val();
            txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
            $(this).val(txt);
        });

简单但有效。你会想要使它更通用，即插即用。这只是提供另一个想法，代码更少。我的编码理念是尽可能地使它尽可能通用，并尽可能减少代码。

希望这会有所帮助。快乐的编码！：）

Answer 11

非常酷你可以大写只有输入字段的第一个字母有这个..如果有人知道如何大写像CSS文本转换：大写，请回复.. 你去.. ..

$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });

Answer 12

土耳其人。如果有人仍然感兴趣。

 $('input[type="text"]').keyup(function() {
    $(this).val($(this).val().replace(/^([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])|\s+([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])/g, function ($1) {
        if ($1 == "i")
            return "İ";
        else if ($1 == " i")
            return " İ";
        return $1.toUpperCase();
    }));
});

Answer 13

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

<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>

示例：这是一个标题案例句子 - ＆gt;这是一个标题案例句子

Answer 14

接受异常的解决方案（通过参数传递）：

复制以下代码并使用如下：$（'myselector'）。maskOwnName（['of'，'on'，'a'，'as'，'at'，'for'，'in' ，'到']）;

(function($) {
    $.fn.teste = function(not_capitalize) {
            not_capitalize = !(not_capitalize instanceof Array)? []: not_capitalize;

        $(this).keypress(function(e){
            if(e.altKey || e.ctrlKey)
                return;

            var new_char = String.fromCharCode(e.which).toLowerCase();

            if(/[a-zà-ú\.\, ]/.test(new_char) || e.keyCode == 8){
                var start = this.selectionStart,
                    end = this.selectionEnd;

                if(e.keyCode == 8){
                    if(start == end)
                        start--;

                    new_char = '';
                }

                var new_value = [this.value.slice(0, start), new_char, this.value.slice(end)].join('');
                var maxlength = this.getAttribute('maxlength');
                var words = new_value.split(' ');
                start += new_char.length;
                end = start;

                if(maxlength === null || new_value.length <= maxlength)
                    e.preventDefault();
                else
                    return;

                for (var i = 0; i < words.length; i++){
                    words[i] = words[i].toLowerCase();

                    if(not_capitalize.indexOf(words[i]) == -1)
                        words[i] = PHP.ucfirst(words[i]);
                }

                this.value = words.join(' ');
                this.setSelectionRange(start, end);
            }
        });
    }

    $.fn.maskLowerName = function(pos) {
        $(this).css('text-transform', 'lowercase').bind('blur change', function(){
            this.value = this.value.toLowerCase();
        });
    }

    $.fn.maskUpperName = function(pos) {
        $(this).css('text-transform', 'uppercase').bind('blur change', function(){
            this.value = this.value.toUpperCase();
        });
    }
})(jQuery);

Answer 15

使用 Javascript ，您可以使用：

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

如果您使用 PHP 生成网页，您也可以使用：

<?=ucfirst($your_text)?>

Answer 16

    .first-character{
        font-weight:bold;
        color:#F00;
        text-transform:capitalize;
   }
.capital-text{
    text-transform:uppercase;
    }

Answer 17

Jquery或Javascipt没有提供实现此目的的内置方法。

CSS测试转换（text-transform:capitalize;）并没有真正大写字符串的数据，但在屏幕上显示大写的渲染。

如果您正在寻找使用普通 vanillaJS 在数据级别实现此目标的合法方式，请使用此解决方案=＆gt;

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

Answer 18

实现这一点时，我同时使用CSS和jQuery解决方案。这将改变它在浏览器中的显示方式和数据值。一个简单的解决方案，只是有效。

<强> CSS

#field {
    text-transform: capitalize;
}

<强>的jQuery

$('#field').keyup(function() {
    var caps = jQuery('#field').val(); 
    caps = caps.charAt(0).toUpperCase() + caps.slice(1);
    jQuery('#field').val(caps);
});

Answer 19

我的尝试。

仅在所有文本均为小写或全部大写时才起作用，使用区域设置大小写转换。尝试尊重故意的大小写差异或名称中的“或”。发生在“模糊”上是为了不引起手机的烦恼。虽然留在选择开始/结束，所以如果更改为抠像也许仍然有用。应该可以在手机上使用，但没有尝试过。

$.fn.capitalize = function() {
    $(this).blur(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var lc = txt.toLocaleLowerCase();
        var startingWithLowerCaseLetterRegex = new RegExp("\b([a-z])", "g");
        if (!/([-'"])/.test(txt) && txt === lc || txt === txt.toLocaleUpperCase()) {
            var stringStart = box.selectionStart;
            var stringEnd = box.selectionEnd;
            $(this).val(lc.replace(startingWithLowerCaseLetterRegex, function(c) { return c.toLocaleUpperCase() }).trim());
            box.setSelectionRange(stringStart, stringEnd);
        }
    });
   return this;
}

// Usage:
$('input[type=text].capitalize').capitalize();

Answer 20

如果使用Bootstrap，请添加：

class="text-capitalize"

例如：

<input type="text" class="form-control text-capitalize" placeholder="Full Name" value="">

Answer 21

稍微更新一下cumul的解决方案。

如果单词之间有多个空格，则函数upperFirstAll无法正常工作。替换此正则表达式来解决它：

$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,

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

21 个答案: