使用javascript将用户types转换为大写
我想将小写字母转换为大写，因为用户使用javascript键入。 任何build议，欢迎。
我已经尝试了以下内容：
$("#textbox").live('keypress', function (e) { if (e.which >= 97 && e.which <= 122) { var newKey = e.which - 32; // I have tried setting those e.keyCode = newKey; e.charCode = newKey; } }); $("#textbox").bind('keyup', function (e) { if (e.which >= 97 && e.which <= 122) { var newKey = e.which - 32; // I have tried setting those e.keyCode = newKey; e.charCode = newKey; } $("#textbox").val(($("#textbox").val()).toUpperCase()); });
css #textbox{text-transform:uppercase}
这可能是一个很好的解决方法。 只需在你的CSS中设置：
input#textbox { text-transform: uppercase; }
如果您将数据发布到服务器端脚本（可以说php），您可以始终这样做：
$upper_data = strtoupper($_POST['textbox']);
嗨这个代码工作正常input和textarea没有延迟或大写更改
$("#input").on('input', function(evt) { var input = $(this); var start = input[0].selectionStart; $(this).val(function (_, val) { return val.toUpperCase(); }); input[0].selectionStart = input[0].selectionEnd = start; });
从https://stackoverflow.com/a/7944108/1272540和https://stackoverflow.com/a/13155583/1272540混合;
的jsfiddle
试试这个CSS脚本它是为我工作。
<style> input{text-transform:uppercase}; </style>
对于信息，你看到的可能是大写，但它实际上仍然是你键入的types，如果你键入“Test”它显示为“TEST”，但是当你通过val（）得到它显示为“Test”。
如果你想让它成为真实的大写，然后添加一些脚本下面的事件，如模糊从对象或elenent所需的。
$（本）.VAL（$（本）.VAL（）toUpperCase（））;
如果你想用于特定的对象添加一些额外的脚本，如我现在使用的
input[attr]{ text-transform:uppercase; } input[attr='value']{ text-transform:uppercase; }
function changeToUpperCase(event,obj) { charValue = (document.all) ? event.keyCode : event.which; if (charValue!="8" && charValue!="0" && charValue != "27"){ obj.value += String.fromCharCode(charValue).toUpperCase(); return false; }else{ return true; } } <input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />
编辑：
最简单的方法是使用CSS：
#txtId {text-transform:uppercase}
$(document).ready(function () { $("#textbox").keyup( function (e) { var str = $(this).val(); $("#textbox").val(str.toUpperCase()); }); });
既然你把它标记为jQuery的问题，下面是一个简单的（很简单的）jQuery解决scheme：
$('#text_statute_section').on('keypress', function(event) { if(null !== String.fromCharCode(event.which).match(/[az]/g)) { event.preventDefault(); $(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase()); } });
使用按键可以防止keyup具有的“反弹”效果（keydown也可以，但是event.which在这里并不直接区分大写和小写 – 由于大写字母locking，shift键检查很麻烦）。 此外，这对input字符进行操作，将其转换为大写字母，然后将其附加到现有值，而不是首先附加，然后将整个事情转换为大写，因为我见过的大多数其他解决scheme都是这样做的。 最后，它实际上是转换字符，而不是像CSS那样对其应用格式化样式。 所有这一切都给予了更好的控制，特别是在某些字符需要被强制转换为大写字母而不是某些字符的情况下，例如序列号等。
编辑:(四年后）！
我从来没有对jQuery / javascript如何处理键入大写字母时感到满意。我已经在这篇文章中的所有build议，并没有一个（至less是我的）完美地工作。 这对我来说很刺激，因为在VB6的旧版本中改变传递给KeyPress事件的KeyAscii字符是一件简单的事情。 无论如何，我意外的发现了一种“黑色艺术”的解决scheme，就像我testing过的那样，它的工作完美无缺。 这意味着它在Chrome中起作用，它正确地处理文本上的任何光标位置，它（有些作品）不会改变浏览器的焦点行为，并且可靠地更改为大写，而不会出现任何forms的小写字母。 虽然CSS解决scheme也完成了所有这些，正如其他人已经注意到的那样，当你需要使用实际的string时，必须以编程方式强制底层字符为大写字母，这可能是一个麻烦，以保持跟踪，因此doesn不好。 所以，我想我可能会写这个，以防有人发现它有用。
这个解决scheme确实取决于Josh Bush的小（180行代码，对于那些担心依赖性膨胀的人） 来自digitalbush的Masked Input Plugin ，它是坚实的并且做得非常好。 如果将event.which更改为另一个值，然后调用mask()方法（首先指定按键处理程序，并在代码中指定第二个掩码），则更改将保留。
这里有一些代码：
$.mask.definitions['b'] = '[AZ, ]'; $('#txtMyInput').on('keypress', function(e) { e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0); }) .mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
掩码本身不支持非常多的掩码types：文字，字母，数字和字母数字。 如果你想标点符号或任何你必须使用正则expression式自己推出。 （如果你这样做的话，你需要记住每次一个字符时应用相同的正则expression式匹配，而不考虑其他字符，所以你不能做任何事情）。 在我的情况下，我需要所有的大写字母，加上空格和逗号。 这个? 在掩码string中表示以下字符是可选的，所以这个字符最多可以input20个字符。 由于我不需要任何掩码来显示，我使用了一个空string作为占位符。
除了一个小问题之外，这一切都是完美的：如果你想保持浏览器在标签栏中select文本的方式，你必须做额外的工作。 我结束了不得不破解面具代码来得到我想要的。
我首先试着简单地select焦点事件处理程序中的文本，通常在从keydown处理程序调用focus()时正常工作。 在这里没有工作; 光标就被设置在文本的末尾，就像鼠标在那里点击一样。 我试着改变占位符到一个空间。 这导致填充文本有足够的空间填满指定的限制，并select整个事情。
我在这里尝试了一些技巧，但是最好的（即在这种情况下真正起作用的）仍然没有应用高亮显示，直到键入，这意味着它发生时有滞后，而不是如果你按下键直到重复，并发生重点放在框中，就会发生。
所以我挖入了掩码。 事实certificate，这个插件还有一个焦点事件处理程序，当你把注意力集中在它的框中时，它用来设置掩码指示符（比如，一个电话的(___) ___-___-____ ））。 这是您大多数时间需要的行为，但不是在这里，因为它会将选定的文本replace为连接到尚未填充的掩码指示符部分的选定文本。 如果没有掩码指示符，则会取消选中框中的文本，就像以编程方式指定框的文本值一样。
我决定破解一些掩码。 我第一次尝试注释掉整个焦点事件处理程序，这个处理程序的效果是不在其他字段上显示input掩码。 所以，我发现了一个较less侵入性的select。 我改变了这个（目前jquery.maskedinput.js，第164行）：
}).on("focus.mask", function() { if (!input.prop("readonly") { // etc.
对此：
}).on("focus.mask", function() { if (!input.prop("readonly") && settings.placeholder.length > 0) {
如果您将占位符设置为空string，则绕过设置掩码指示符，这允许浏览器的本机焦点行为发生。
还有一件事：如果使用focus()方法专注于文本框（例如，为了将数据input用户从浏览器使用Tab键时未知的部分转移到未知部分），您将拥有在焦点事件处理程序中调用select()方法以恰当地突出显示文本（ keybdFocus是我从keydown处理程序调用focus()事件时设置的标志，以便与鼠标生成的焦点区分开来）：
$('#txtMyInput').on('keypress', function(e) { e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0); }) .mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' }) .focus(function() { if (kybdFocus) { kybdFocus = false; $(this).select(); } });
总结步骤：
- 下载Josh Bush的Masked Edit Plugin。
- 更改插件的焦点处理程序中的代码行。
- 设置一个面具定义（如果需要）来处理你想要的字符。
- 在您的按键事件处理程序中，使用您最喜欢的技术将e.which更改为大写字母。 （重要的是：对处理函数的调用必须先于代码中对
mask()方法的调用之后，掩码会计算e.which以确定候选字符是否适合掩码，显然处理程序和掩码是在指定的顺序）。 - 当您调用
mask()方法时，将占位符值设置为''。 - 如果用焦点击中input框，则在焦点事件处理程序中调用
select()方法。
当然，如果你只是想在一个典型的蒙面编辑框的上下文中强制字符为大写，你可以省略步骤2和4.这就是我首先想到的。
这是我提出的一个解决scheme，它也避免了占位符变成大写的问题，而且不会弄乱光标位置。
注意：不会更改字段的“值”，只能显示。 在这里看到： 更新input的值，而不会丢失光标位置
$(function() { $("[data-uppercase='1']").on('keypress', function (e) { var $this = $(this); var placeholder = $this.attr('placeholder'); if(placeholder && placeholder.length > 0) { this["_placeholder"] = placeholder; $this.attr('placeholder', ''); } $this.css('text-transform', 'uppercase'); }).on('keyup blur', function () { var $this = $(this); if ($this.val().length < 1) { $this.css("text-transform", ""); $this.attr("placeholder", this["_placeholder"]); this["_placeholder"] = undefined; } }); });
然后将一个数据大写属性添加到HTML元素：
<input type="text" data-uppercase="1" />
在Chrome，Firefox和IE9 +中工作。
小提琴： https ： //jsfiddle.net/GarryPas/ptez7q0q/3/
我知道我很晚参加派对，但是我想提供这个：
(function ( $ ) { var displayUppercase = function ($element) { if ($element.val()) { $element.css('text-transform', 'uppercase'); } else { $element.css('text-transform', 'none'); } }; $.fn.displayAsUppercase = function() { $(this).each(function() { var $element = $(this); displayUppercase($element); $element.on('input', function(){displayUppercase($element)}); }); return this; }; }( jQuery ));
它有这些优点：
- 保持占位符大小写不变
- 马上input大写（在keydown上）
- 不移动光标
- 如果预填充，则将input值大写
JS小提琴在这里
尽pipeCSS +服务器端UCase方法可能是“最好的”，但在需求出现时，我使用了一个客户端jQuery解决scheme：
$("#id").keyup(function() { $(this).val($(this).val().replace(/([az])/,function(s){return s.toUpperCase()})); });
她不漂亮，但她会完成工作！
$("#id").keyup(function() { $(this).val($(this).val().replace(/([az])/,function(){ return $("#id").toUpperCase(); })); });
在上面的脚本中的小修正现在可以很好地工作。
