10

我正在尝试自动大写用户输入的文本区域/输入的第一个字符。第一次尝试看起来像这样：

$(document).ready(function() {
 $('input').on('keydown', function() {
    if (this.value[0] != this.value[0].toUpperCase()) {
        // store current positions in variables
        var start = this.selectionStart;
        var end = this.selectionEnd; 
        this.value = this.value[0].toUpperCase() + this.value.substring(1);
        // restore from variables...
        this.setSelectionRange(start, end);
    }
 });
});

这样做的问题是它显示小写字符然后更正它，这很丑陋（http://jsfiddle.net/9zPTA/2/）。我想在keydown而不是keyup上运行我的javascript，并转换飞行中的事件（或拦截它，防止默认，并触发修改后的新事件）。

这是我现在所拥有的，它不起作用（http://jsfiddle.net/9zPTA/5/）：

$(document).ready(function() {
  $('input').on('keydown', function(event) {
    if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey)) {
       event.preventDefault();
       var myEvent = jQuery.Event('keypress');
       myEvent.target = event.target;
       myEvent.shiftKey = true;
       myEvent.keyCode = event.keyCode;
       $(document).trigger(myEvent);
    }
  });
});

我不确定为什么这不起作用-我在这里缺少什么？

4

9 回答 9

27

在这种情况下使用 CSS 会容易得多：

input{
    text-transform: capitalize;
}

更新：当您不想大写每个单词的第一个字母，而只想大写第一个单词的第一个字母时，此方法有效：

input::first-letter{
    text-transform: uppercase;
}
于 2013-11-08T20:12:39.000 回答
13

这是我在 Chrome 中做的一个小提琴。我不确定它是否适用于其他浏览器。

代码：

$(document).ready(function() {
    $('input').on('keydown', function(event) {
        if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
           var $t = $(this);
           event.preventDefault();
           var char = String.fromCharCode(event.keyCode);
           $t.val(char + $t.val().slice(this.selectionEnd));
           this.setSelectionRange(1,1);
        }
    });
});
于 2013-11-08T20:23:41.867 回答
4

这对我有用。

$('input').keyup(function() {
  $(this).val($(this).val().substr(0, 1).toUpperCase() + $(this).val().substr(1).toLowerCase());
});
于 2014-02-10T14:56:09.257 回答
2

尝试这个：

$(document).ready(function() {
    $('input').on('keydown', function(e) {
        if (this.value == '') {
        var char = String.fromCharCode(e.which);
            if (char.match(/^\w$/)) {
                // If is empty and we pressed a printable key...
                this.value = char.toUpperCase();
                return false;
            }
        }
    });
});

在这里查看使用中。

于 2013-11-08T21:02:33.787 回答
1 
//First letter only(absolutely). eg. Tom tom, tom
//Note: "change paste" in this function ensures this will work even if the user pasted into the input or used the autocomplete.

$('#your-input').on('change paste keydown', function(e) {
    $th_inp = $(this).val();
    inp_val = $th_inp.charAt(0).toUpperCase()+$th_inp.slice(1);
    $(this).val(inp_val);
});

//First letter (including after punctuation). eg. Tom Tom, Tom

$('#your-input').on('change keydown paste', function(e) {
  if (this.value.length = 1) {}
    var $this_val = $(this).val();
    this_val = $this_val.toLowerCase().replace(/\b[a-z]/g, function(char) {
        return char.toUpperCase();
    });
    $(this).val(this_val);
});
于 2021-09-02T22:33:11.430 回答
0

您可以使用 jQuery 函数：

$.fn.CapitalizeFirst = function () {
    return this.each(function () {
        $(this).on('keydown', function (event) {
            if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
                var $t = $(this);
                event.preventDefault();
                var char = String.fromCharCode(event.keyCode);
                $t.val(char + $t.val().slice(this.selectionEnd));
                this.setSelectionRange(1, 1);
            }
        });
    });
};
于 2014-12-16T07:36:40.827 回答
0

工作的 jQuery。确保在导入 jQuery 后编写以下代码：

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
    $('#id_of_input').keyup(function(event) {
        var textBox = event.target;
        var start = textBox.selectionStart;
        var end = textBox.selectionEnd;
        textBox.value = textBox.value.charAt(0).toUpperCase() + textBox.value.slice(1);
        textBox.setSelectionRange(start, end);
    });
});
</script>
于 2018-07-12T13:54:16.023 回答
-1

这在之前的帖子中讨论过。 如何在 JavaScript 中使字符串的第一个字母大写？

您可以在输入第一个单词后或真正需要时抓取用户输入，并使用上面链接中讨论的方法重置值。

于 2013-11-08T20:13:43.540 回答
-1 
$('selector').blur(function(){
        $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().slice(1)); 
  });
于 2015-03-17T17:14:44.060 回答