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

我的目标是使用jQuery事件.keyup（）将input的小写字符转换为大写字母。

我怎样才能做到这一点？

Answer 1

Plain ol'javascript：

var input = document.getElementById('inputID'); input.onkeyup = function(){ this.value = this.value.toUpperCase(); } 

Javascript与jQuery：

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

Answer 2

用这种方式改变用户input的唯一问题是，如何让terminal用户感到不安（他们会短暂地看到小写字母跳转到大写字母）。

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

 text-transform: uppercase; 

这样，input的任何文本总是以大写字母出现。 唯一的缺点是这是一个纯粹的视觉变化 – input控件的值（当在代码中查看时）将保持原来input的情况。

简单的解决这个问题，强制inputval（）.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

jQuery的：

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

---

1. 将input的样式设置为大写（所以用户看不到更改）
2. 自动调整值（所以用户不必保持移位或使用大写locking）

Answer 6

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

我的问题与其他答案是，应用text-transform: uppercase CSS也将大写的占位符文本，我们不想要的。

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

1. 创build文本 – 大写的类。

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

2. 绑定到keydown事件。

   绑定到keydown事件对于在angular色可见之前添加类是很重要的。 绑定到按键或键盘上留下小写字母的短暂闪烁。

    $('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，您可能会发现使用删除键删除文本或删除文本可能不会删除该类。 您可以修改keydown以考虑到删除字符。

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

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

尽pipe对于我们最常见的用例来说，做出这些额外的努力是非常值得的，但是超出这个范围并不是必要的。 🙂

Answer 7

以上的答案是相当不错的，只是想为此添加简短的表格

  <input type="text" name="input_text" onKeyUP="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

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

 ClientIDMode="Static" 

Answer 10

我成功地使用这个代码来改变大写字母

 $(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 11

我使用telerik radcontrols，这就是为什么我find一个控件，但你可以直接find控制：$（'＃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>