当用户使用 javascript 键入时，我想将小写字符转换为大写。欢迎任何建议。
我尝试了以下方法：
$("#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;
}
});
css
#textbox{text-transform:uppercase}
$("#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 中设置：
input#textbox {
text-transform: uppercase;
}
如果您将数据发布到服务器端脚本（比如说 php），您可以随时执行以下操作：
$upper_data = strtoupper($_POST['textbox']);
嗨，这段代码在输入和文本区域上运行良好，没有延迟或大小写变化
$("#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
试试这个css脚本它对我有用。
<style>
input{text-transform:uppercase};
</style>
有关信息，您看到的内容可能是大写的，但实际上仍然是您键入的内容，如果您键入“Test”，它会显示为“TEST”，但是当您通过 val() 获取时，它会显示为“Test”。
如果你想让它成为真实的大写，然后在下面添加一些脚本，如你需要的对象模糊或元素。
$(this).val($(this).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}
由于您也将此标记为 jQuery 问题，因此这里有一个简单（非常简单）的 jQuery 解决方案：
$('#text_statute_section').on('keypress', function(event) {
if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
event.preventDefault();
$(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase());
}
});
使用 keypress 可以防止 keyup 具有的“弹跳”效果（keydown 也可以，但是 event.which 在这里不直接区分大小写 - 由于大写锁定，移位键检查很混乱）。此外，这对输入字符进行操作，将其转换为大写，然后将其附加到现有值，而不是像我见过的大多数其他解决方案那样首先附加然后将整个内容转换为大写。最后，它实际上转换了字符，而不是像 CSS 那样对其应用格式样式。所有这些都提供了更好的控制，尤其是在某些字符需要强制为大写而另一些不需要的情况下，例如在序列号等中。
编辑：（四年后）！
我从来没有对 jQuery/javascript 在输入时如何处理将键更改为大写感到满意。我已经阅读了这篇文章中的所有建议，但没有一个（尤其是我的）能完美地工作。这让我很恼火，因为在旧的 VB6 时代，更改传递给 KeyPress 事件的 KeyAscii 字符是一件简单的事情。无论如何，很偶然，我发现了一种“黑色艺术”解决方案，就我测试它而言，它确实可以完美运行。这意味着它可以在 Chrome 中工作，它可以正确处理文本上的任何光标位置，它（通过一些工作）不会改变浏览器的焦点行为，并且它可以可靠地更改为大写字母，而不会首先显示任何形式的小写字母。虽然 CSS 解决方案也能做到这一切，正如其他人所观察到的那样，它的缺点是当您需要使用实际字符串时，必须以编程方式强制底层字符为大写，这可能很麻烦，因此无法很好地扩展。所以，我想我可以把它写下来，以防有人发现它有用。
这个解决方案确实依赖于 Josh Bush 的小（180 行代码，对于那些担心依赖膨胀的人）来自 digitalbush 的 Masked Input Plugin，它坚如磐石并且做得很好。如果您更改event.which为另一个值，然后调用该mask()方法（首先指定按键处理程序，然后在代码中指定掩码），则更改将持续存在。
这是一段代码：
$.mask.definitions['b'] = '[A-Z, ]';
$('#txtMyInput').on('keypress', function(e) {
e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
掩码本身不支持很多掩码类型：文字、字母、数字和字母数字。如果你想要标点符号或任何你必须使用正则表达式自己滚动的东西。（如果你这样做，你需要记住相同的正则表达式匹配一次应用于每个字符，而不考虑其他字符，所以你不能做任何花哨的事情）。在我的特殊情况下，我需要全部大写，加上空格和逗号。掩码字符串中的?表示以下字符是可选的，所以这个给我最多 20 个字符。由于我不需要显示任何掩码，因此我使用空字符串作为占位符。
这一切都很完美，除了一个小问题：如果你想保持浏览器在进入字段时选择文本的方式，你必须做额外的工作。我最终不得不破解掩码代码以获得我想要的东西。
我首先尝试在焦点事件处理程序中简单地选择文本，这通常在我focus()从 keydown 处理程序调用时起作用。它在这里不起作用；光标刚刚设置到文本的末尾，就像在鼠标点击那里一样。我尝试将占位符更改为空格。这导致用足够的空格填充文本以填充指定的限制，并选择整个内容。
我在这里尝试了一些技术，但其中最好的（即在这种情况下实际工作的技术）仍然不会应用高亮直到按键，这意味着它发生时有延迟，它不会如果您按住键直到它重复并碰巧在焦点位于框中时松开，就会发生这种情况。
所以我研究了掩码代码。事实证明，该插件还有一个焦点事件处理程序，(___) ___-___-____当您关注它时，它用于在框中设置掩码指示器（例如，对于电话）。这是您大部分时间想要的行为，但不是在这里，因为它会将所选文本替换为连接到尚未填充的掩码指示器部分的所选文本。当您没有掩码指示器时，这具有取消选择框中的文本的效果，就像您以编程方式分配框的文本值一样。
我决定稍微破解一下掩码代码。我首先尝试注释掉整个焦点事件处理程序，它的效果是没有在我想要的其他字段上显示输入掩码。所以，我找到了一个侵入性较小的替代方案。我改变了这个（当前 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) {
如果您将占位符设置为空白字符串，这将绕过设置掩码指示器，这允许浏览器的本机焦点行为发生。
还有一件事：如果您使用该focus()方法专注于文本框（例如，为了使数据输入用户免于浏览器在使用 tab 键时徘徊到未知部分的倾向），您将不得不调用select()焦点事件处理程序中的方法以正确突出显示文本（keybdFocus是我在focus()从处理程序调用事件时设置的标志keydown，以便与鼠标生成的焦点区分开来）：
$('#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();
}
});
总结步骤：
mask()。掩码评估 e.which 以确定候选字符是否适合掩码，并且显然处理程序和掩码代码按以下顺序触发它们是指定的。） ''时将占位符值设置为。mask()select()在焦点事件处理程序中调用该方法。当然，如果您只想在典型的蒙版编辑框的上下文中强制字符为大写，您可以省略步骤 2 和 4。这就是我一开始就陷入这种情况的原因。
$(document).ready(function () {
$("#textbox").keyup(function (e) {
var str = $(this).val();
$("#textbox").val(str.toUpperCase());
});
});
我知道我参加聚会很晚了，但我想提供这个：
(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 ));
它具有以下优点：
JS小提琴在这里
这是我想出的一个解决方案，它也避免了占位符变为大写的问题，并且不会弄乱光标位置。
注意：不改变字段的“值”，只改变显示。为此，请参见此处：在不丢失光标位置的情况下更新输入值
$(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 元素中添加一个 data-uppercase 属性：
<input type="text" data-uppercase="1" />
在 Chrome、Firefox 和 IE9+ 中工作。
$(document).on('keypress', '.to-tr-upper-case', function (e) {
var object=this;
setTimeout(function () {
var start=object.selectionStart;
var end=object.selectionEnd;
$(object).val($(object).val().toLocaleUpperCase('tr-TR'));
object.selectionStart=start;
object.selectionEnd=end;
},100);
});
虽然 CSS + 服务器端 UCase 方法可能是“最好的”，但这是我在需要时使用的客户端 jQuery 解决方案：
$("#id").keyup(function() {
$(this).val($(this).val().replace(/([a-z])/,function(s){return s.toUpperCase()}));
});
她不漂亮，但她会完成工作！
$("#id").keyup(function() {
$(this).val($(this).val().replace(/([a-z])/,function(){
return $("#id").toUpperCase();
}));
});
上面脚本中的小修正现在可以完美运行。