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

Question

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

我怎样才能做到这一点？

Answer 1

解决方案 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 2

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

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

在你的 html 标签引导中

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

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

ClientIDMode="Static"

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

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

Answer 4

以上答案都不错，只是想为此添加简短形式

 <input type="text" name="input_text"  onKeyUP="this.value = this.value.toUpperCase();">

Answer 5

这对我有用

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

Answer 6

我使用 Telerik radcontrols，这就是我查找控件的原因，但您可以直接找到控件，例如： $('#IdExample').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 7

普通的 javascript：

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

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

带有 jQ​​uery 的 Javascript：

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

Answer 8

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

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

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

1. 创建文本大写类。

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

2. 绑定到 keydown 事件。

   绑定到 keydown 事件对于在角色可见之前添加要添加的类很重要。绑定到 keypress 或 keyup 会使小写字母短暂闪烁。

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

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

   var myValue = this.value.toUpperCase();
   

YMMV，你可能会发现用delete键剪切或删除文本可能不会删除类。您可以修改 keydown 以将删除字符也考虑在内。

另外，如果你只有一个字符，并且你当前的光标位置在位置 0，按退格键将删除 text-transform 类，但由于光标位置在位置 0，它不会删除单个字符.

这需要更多的工作来检查当前字符位置并确定删除或退格键是否会真正删除剩余的单个字符。

尽管对于我们最常见的用例来说，为了使这个看起来不那么明显且具有视觉吸引力是值得的，但没有必要超越这一点。 :)

Answer 9

假设您的 html 代码是：

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

那么 jquery 应该是：

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

Answer 10

jQuery:

var inputs = $('#foo');

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

---

1. 将输入的样式设置为大写（这样用户就看不到变化）
2. 自动调整值（因此用户不必按住 shift 或使用大写锁定）

Answer 11

像这样即时更改用户输入的唯一问题是最终用户会感到多么不安（他们会短暂地看到小写字符跳到大写）。

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

text-transform: uppercase;

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

要解决这个问题很简单，强制输入 val() .toUpperCase();那么你就两全其美了。

Answer 12

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

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