76

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

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

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

任何人有我的例子吗？

4

21 回答 21

103

只需使用 CSS。 

.myclass 
{
    text-transform:capitalize;
}
于 2010-01-07T00:53:02.267 回答
89

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

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

于 2012-11-29T15:42:04.400 回答
31

我在别处回答了这个问题。但是，您可能希望在 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 );

   });

希望这会有所帮助

干杯:)

于 2011-08-30T10:54:15.440 回答
28 
$('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( ); }));
});
于 2010-01-07T00:52:50.897 回答
26

带有“文本转换：大写；”的 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();
于 2011-10-25T04:54:49.257 回答
18

我使用了@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));

格罗耶斯 :)

于 2013-05-14T23:17:21.667 回答
12

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

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

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

$.fn.extend($, { 
    capitalize: function() {
        return $.camelCase("-"+arguments[0]); 
    } 
});
于 2015-03-13T19:35:09.310 回答
10 
 $("#test").keyup(
     function () {
         this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
     }
 );
于 2016-04-05T13:12:26.747 回答
7

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

（两者都使用 Jquery 语法）

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

另外一个函数将整个字符串大写：

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

用于文本框点击事件的语法：

    onClick="CapitaliseFirstLetter('myTextboxId'); return false"
于 2012-04-27T15:50:22.570 回答
5

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

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

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

于 2016-06-02T11:38:05.580 回答
4

我的道歉。由于我匆忙和草率，语法被关闭了。干得好...

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

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

希望这可以帮助。快乐编码！:)

于 2013-05-14T23:28:04.003 回答
4

很酷，你可以只大写输入字段的第一个字母 有了这个.. 如果有人知道如何大写 Like CSS text-transform:capitalize，请回复.. 给你..

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

于 2014-11-10T13:36:42.977 回答
2

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

 $('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();
    }));
});
于 2015-09-28T20:27:09.493 回答
2

使用Javascript，您可以使用：

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

如果您偶然使用PHP生成网页，您还可以使用：

<?=ucfirst($your_text)?>
于 2017-09-07T07:29:00.513 回答
1

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

复制下面的代码并像这样使用它： $('myselector').maskOwnName(['of', 'on', 'a', 'as', 'at', 'for', 'in', 'to ']);

(function($) {
    $.fn.maskOwnName = 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] = words[i].substring(0,1).toUpperCase() + words[i].substring(1,words[i].length).toLowerCase();
                }

                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);
于 2016-12-05T21:34:42.193 回答
1

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

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

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

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);
    }
}
于 2017-07-23T09:00:21.363 回答
1

实现这一点时，我同时使用 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);
});
于 2018-02-09T02:01:56.207 回答
1

如果使用 Bootstrap，请添加：

class="text-capitalize"

例如：

<input type="text" class="form-control text-capitalize" placeholder="Full Name" value="">
于 2020-05-08T20:34:04.380 回答
0 
    .first-character{
        font-weight:bold;
        color:#F00;
        text-transform:capitalize;
   }
.capital-text{
    text-transform:uppercase;
    }
于 2013-05-09T09:53:27.363 回答
0

我的尝试。

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

$.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();
于 2019-10-04T05:16:22.623 回答
-3

cumul 的解决方案略有更新。

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

$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,
于 2016-04-22T14:39:20.700 回答