Question

我的目标是使用jQuery事件.keyup()将输入的小写字符转换为大写字母。

我怎样才能做到这一点？

Answer 1

普通ol'javascript：

var input = document.getElementById('inputID');

input.onkeyup = function(){
    this.value = this.value.toUpperCase();
}

使用jQuery的Javascript：

$('#inputID').keyup(function(){
    this.value = this.value.toUpperCase();
});

Answer 2

像这样改变用户输入的唯一问题是最终用户看起来多么令人不安（他们会简单地看到小写字符跳转到大写）。

您可能需要考虑的是将以下CSS样式应用于输入字段：

text-transform: uppercase;

这样，输入的任何文本总是以大写字母显示。唯一的缺点是这是一个纯粹的视觉变化 - 输入控件的值（在后面的代码中查看）将保留最初输入的情况。

简单来解决这个问题，强制输入val（）。toUpperCase（）;那么你就是两全其美的。

Answer 3

$(document).ready(function()
{
    $('#yourtext').keyup(function()
    {
        $(this).val($(this).val().toUpperCase());
    });
});

<textarea id="yourtext" rows="5" cols="20"></textarea>

Answer 4

假设你的HTML代码是：

<input type="text" id="txtMyText" />

那么jquery应该是：

$('#txtMyText').keyup(function() {
  this.value = this.value.toUpperCase();
});

Answer 5

随着占位符文本越来越受支持，此更新可能是相关的。

我对其他答案的问题是，应用text-transform: uppercase css也会使占位符文本大写，这是我们不想要的。

要解决这个问题，这有点棘手但值得净效果。

创建text-uppercase类。

.text-uppercase {
    text-transform:uppercase;
}

绑定到 keydown 事件。

绑定到keydown事件对于在角色可见之前添加类非常重要。绑定到按键或键盘会使小写字母短暂闪烁。

$('input').on('keydown', function(e)
{
    // Visually Friendly Auto-Uppercase
    var $this = $(this);

    // 1. Length of 1, hitting backspace, remove class.
    if ($this.val().length == 1 && e.which == 8)
    {
        $this.removeClass('text-uppercase');
    }

    // 2. Length of 0, hitting character, add class.
    if ($this.val().length == 0 && e.which >= 65 && e.which <= 90)
    {
        $this.addClass('text-uppercase');
    }
});

提交服务器时转换为大写。

var myValue = this.value.toUpperCase();

YMMV，您可能会发现使用删除键剪切文本或删除文本可能无法删除该类。您可以修改keydown以同时考虑删除字符。

此外，如果您只有一个字符，并且当前光标位置位于0，则按退格键将删除文本转换类，但由于光标位置位于位置0，因此不会删除单个字符

这还需要做更多工作来检查当前字符位置，并确定删除或退格键是否实际删除单个剩余字符。

虽然值得花费额外的努力使这个看起来无形且在视觉上吸引我们最常见的用例，但超出此范围是不必要的。：）

Answer 6

jQuery的：

var inputs = $('#foo');

inputs.each(function(){
          this.style.textTransform = 'uppercase';
       })
       .keyup(function(){
          this.value = this.value.toUpperCase();
       });

将输入的样式设置为大写（因此用户看不到更改）
自动调整值（这样用户无需按住班次或使用大写锁定）

Answer 7

解决方案1 （具有出色用户体验的优雅方法）

HTML

<input id="inputID" class="uppercase" name="inputName" value="" />

CSS

.uppercase{
    text-transform: uppercase;
}

JS

$('#inputID').on('blur', function(){
    this.value = this.value.toUpperCase();
});

通过使用CSS text-transform: uppercase;，您将消除用户在字段中键入时从小写到大写的动画。

使用blur事件来处理转换为大写。这是在后台发生的，因为CSS照顾了用户的视觉吸引力。

解决方案2 （很棒，但不太优雅）

如果您坚持使用keyup，那么这里就是...

$('#inputID').on('keyup', function(){
    var caretPos = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(caretPos, caretPos);
});

用户在输入字段时会注意到从小写到大写的动画。它完成了工作。

解决方案3 （只需完成工作即可）

$('#inputID').on('keyup', function(){
    this.value = this.value.toUpperCase();
});

通常建议使用此方法，但我不建议使用。

该解决方案的缺点是，您的烦人之处在于每次输入键后，光标的插入符号位置都会不断跳到文本的结尾。除非您知道您的用户永远不会遇到错别字，否则他们每次都会清除文本并重新输入，否则此方法将起作用。

Answer 8

这对我有用

jQuery(document).ready(function(){ 
        jQuery('input').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
        jQuery('textarea').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
 });

Answer 9

我成功使用此代码更改大写

$(document).ready(function(){
$('#kode').keyup(function()
{
    $(this).val($(this).val().toUpperCase());
});
});
</script>

在你的html标签bootstraps中

<div class="form-group">
                            <label class="control-label col-md-3">Kode</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input name="kode" placeholder="Kode matakul" id="kode" class="form-control col-md-7 col-xs-12" type="text" required="required" maxlength="15">
                                <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                            </div>
                        </div>

Answer 10

我使用telerik radcontrols，这就是为什么我找到一个控件，但你可以直接找到控件，如： $（＆＃39;＃IdExample＆＃39）。CSS（{

这段代码对我有用，我希望能帮助你，对不起我的英语。

代码Javascript：

<script type="javascript"> 
function changeToUpperCase(event, obj) {
var txtDescripcion = $("#%=RadPanelBar1.Items(0).Items(0).FindControl("txtDescripcion").ClientID%>");
             txtDescripcion.css({
                 "text-transform": "uppercase"
             });
} </script>

代码ASP.NET

<asp:TextBox ID="txtDescripcion" runat="server" MaxLength="80" Width="500px"                                                             onkeypress="return changeToUpperCase(event,this)"></asp:TextBox>

Answer 11

确保该字段在其html中具有此属性。

ClientIDMode="Static"

然后在你的脚本中使用它：

$("#NameOfYourTextBox").change(function () {
                 $(this).val($(this).val().toUpperCase());
             });

如何使用'keyup'事件将小写字符更改为大写？

11 个答案:

jQuery的：