使用 javascript 将用户类型转换为大写
Posted
技术标签:
【中文标题】使用 javascript 将用户类型转换为大写【英文标题】：Convert to uppercase as user types using javascript 【发布时间】：2011-07-31 02:25:29 【问题描述】：当用户使用 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;
);
【问题讨论】：
他们在输入什么？如果它是输入或文本区域，您可以连接到 on keydown 【参考方案1】：css
#textboxtext-transform:uppercase
【讨论】：
.. 但是你可以捕获“onchange”事件并将值更新为实际的大写字符（如果访问输入框的值，它仍然是小写字母） 现在可以使用了 - 第一个版本有upper-case 而不是 uppercase。 :) 我 +1，因为这是一个聪明的答案，但实际上并没有改变文本框的值。
这是一个优雅的解决方案。无论如何，服务器端通常需要处理规范化输入。我不知道 CSS 可以做到这一点。
我知道 OP 已经询问了如何使用 JavaScript 来做到这一点，但我认为这是一种更优雅、更有效的方法。此外，它必须被认为比这种东西更易于维护：if (e.which >= 97 && e.which <= 122) 。
text-transform:uppercase 还会在您的输入框中使 html 5 placeholder 文本大写（我只在 Chrome 41 中测试过）。不喜欢那样，所以我改用 JavaScript 解决方案。【参考方案2】：
$("#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());
);
【讨论】：
使用Event.charCode 会在 JS 控制台中触发警告。那个警告是：The 'charCode' property of a keyupevent should not be used. The value is meaningless.我不知道你为什么在使用Event.which和Event.keyCode时使用它。
@MattMcDonald：我只是从示例中获取代码，并希望回答 OP 想要什么。 ;)
这行得通。它看起来很丑，因为您可以看到文本正在更改。我认为这与 CSS 文本转换一起是最好的解决方案。谢谢
如果您使用 keydown 而不是 keyup，您将看不到正在更改的文本。
光标位置丢失。 if 中的块什么都不做。【参考方案3】：
这可能是一个不错的解决方法。只需在您的 CSS 中设置：
input#textbox
text-transform: uppercase;
如果您将数据发布到服务器端脚本（比如说 php），您可以随时执行以下操作：
$upper_data = strtoupper($_POST['textbox']);
【讨论】：
【参考方案4】：虽然 CSS + 服务器端 UCase 方法可能是“最好的”，但这是我在需要时使用的客户端 jQuery 解决方案：
$("#id").keyup(function()
$(this).val($(this).val().replace(/([a-z])/,function(s)return s.toUpperCase()));
);
她不漂亮，但她会完成工作！
【讨论】：
不...它只是在 keyup 上提升案例。您是否在特定浏览器中看到问题@esp？ 在 safari 中更改表单字段导致将光标移动到字段末尾时有这个东西，因为它在它上面不会让您在字段内移动带有箭头的光标。可能如果您仔细过滤哪些键不接触该字段，它可以工作。但奇怪的是，在插入之前，我找不到在输入字符时替换它的方法。不过看起来并不难；） 不像你说的那么漂亮，但肯定比我刚刚发布的漂亮解决方案简单得多。【参考方案5】：$("#id").keyup(function()
$(this).val($(this).val().replace(/([a-z])/,function()
return $("#id").toUpperCase();
));
);
上面脚本中的小修正现在可以完美运行了。
【讨论】：
光标位置丢失 - 它转到最后一个位置。您应该先测试您的解决方案，然后再将其发布到此处。【参考方案6】：由于您也将此标记为 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 在这里不直接区分大小写 - 由于大写锁定，shift 键检查很混乱）。此外，这对输入字符进行操作，将其转换为大写，然后将其附加到现有值，而不是像我见过的大多数其他解决方案那样首先附加然后将整个内容转换为大写。最后，它实际上转换了字符，而不是像 CSS 那样对其应用格式样式。所有这些都提供了更好的控制，尤其是在某些字符需要强制为大写而另一些不需要的情况下，例如在序列号等中。
编辑：（四年后）！
我从来没有对 jQuery/javascript 在输入时如何处理将键更改为大写感到满意。我已经阅读了这篇文章中的所有建议，但没有一个（尤其是我的）可以完美地工作.这让我很恼火，因为在旧的 VB6 时代，更改传递给 KeyPress 事件的 KeyAscii 字符是一件简单的事情。无论如何，很偶然，我发现了一种“黑色艺术”解决方案，就我测试它而言，它确实可以完美运行。这意味着它可以在 Chrome 中工作，它可以正确处理文本上的任何光标位置，它（通过一些工作）不会改变浏览器的焦点行为，并且它可以可靠地更改为大写字母，而不会首先显示小写字母。虽然 CSS 解决方案也完成了所有这些工作，但正如其他人所观察到的那样，它的缺点是当您需要使用实际字符串时，必须以编程方式将底层字符强制为大写，这可能很麻烦，因此无法跟踪不能很好地扩展。所以，我想我可以把它写下来，以防有人觉得它有用。
这个解决方案确实依赖于 Josh Bush 的小代码（180 行代码，对于那些担心依赖膨胀的人）Masked Input Plugin from digitalbush，它坚如磐石，并且做得很好。如果您将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: '' )
Mask 本身并不支持很多掩码类型：文字、字母、数字和字母数字。如果你想要标点符号或任何你必须使用正则表达式自己滚动的东西。 （如果你这样做，你需要记住相同的正则表达式匹配一次应用于每个字符，而不考虑其他字符，所以你不能做任何花哨的事情）。在我的特殊情况下，我需要全部大写，加上空格和逗号。掩码字符串中的? 表示以下字符是可选的，所以这个给我最多20 个字符。由于我不需要显示任何掩码，因此我使用了一个空字符串作为占位符。
这一切都很完美，除了一个小问题：如果你想保持浏览器在进入字段时选择文本的方式，你必须做额外的工作。我最终不得不破解掩码代码来获得我想要的东西。
我首先尝试在焦点事件处理程序中简单地选择文本，这通常在我从 keydown 处理程序调用 focus() 时起作用。它在这里不起作用；光标刚刚设置到文本的末尾，就像在鼠标点击那里一样。我尝试将占位符更改为空格。这导致用足够的空格填充文本以填充指定的限制，并选择整个内容。
我尝试了一些技术here，但其中最好的技术（即在这种情况下实际工作的技术）仍然不会应用高亮直到按键，这意味着它发生时会有延迟，如果您按住键直到它重复并碰巧在焦点位于框中时松开，则根本不会发生这种情况。
所以我挖掘了掩码代码。事实证明，该插件还有一个焦点事件处理程序，当您关注它时，它用于在框中设置掩码指示器（例如，(___) ___-___-____ 用于电话）。这是您大部分时间想要的行为，但不是在这里，因为它会将所选文本替换为连接到尚未填充的掩码指示器部分的所选文本。当您没有掩码指示器时，这具有取消选择框中的文本的效果，就像您以编程方式分配框的文本值一样。
我决定稍微破解一下掩码代码。我首先尝试注释掉整个焦点事件处理程序，它的效果是没有在我想要的其他字段上显示输入掩码。所以，我找到了一个侵入性较小的替代方案。我改变了这个（当前 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 是我在从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 插件。
更改插件焦点处理程序中的代码行。
设置掩码定义（如果需要）以处理所需的字符。
在您的按键事件处理程序中，使用您最喜欢的技术将 e.which 更改为等效的大写字母。 （重要提示：在您的代码中，对处理程序的调用必须先于对
mask() 方法的调用。掩码评估 e.which 以确定候选字符是否适合掩码，显然处理程序和掩码代码按照指定的顺序触发。）
在调用mask() 方法时将占位符值设置为''。
如果您用焦点点击输入框，请在焦点事件处理程序中调用 select() 方法。
当然，如果您只是想在典型的蒙版编辑框的上下文中将字符强制为大写，您可以省略步骤 2 和 4。这就是我一开始就陷入这种情况的原因。
【讨论】：
将键入的字符附加到当前值并不总是正确的。这使得无法在字符串中的其他位置编辑文本（例如，键入“WORLD”，然后单击以将光标放在开头并尝试使值显示“HELLO WORLD”......你会得到“WORLDHELLO”） . 好点，用户。我是从我写的东西中借用的，这不是问题（我认为），但它肯定是。我会跑回去仔细检查我的代码。谢谢！【参考方案7】：您好，这段代码在输入和文本区域上运行良好，没有延迟或大小写变化
$("#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://***.com/a/7944108/1272540 和https://***.com/a/13155583/1272540
jsFiddle
【讨论】：
我发现这段代码对我来说很好用。接受所有输入的一个小改动：使用适用于所有输入的类 $(".input-large").on(...); 此解决方案也适用于光标位置。我喜欢它。 还将当前键入的字符保留为小写 (Chrome)。【参考方案8】：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
【讨论】：
【参考方案9】：试试这个 css 脚本，它对我有用。
<style>
inputtext-transform:uppercase;
</style>
对于信息，您看到的内容可能是大写的，但实际上仍然是您输入的内容，如果您输入“Test”，它会显示为“TEST”，但是当您通过 val() 获取时，它会显示为“Test”。
如果你想让它成为真实的大写，然后在下面添加一些脚本，如你需要的对象模糊或元素。
$(this).val($(this).val().toUpperCase());
如果您想用于特定对象，请添加一些额外的脚本，例如我现在使用的脚本
input[attr]
text-transform:uppercase;
input[attr='value']
text-transform:uppercase;
【讨论】：
我在 chrome 和 mozilla 上使用过它。它对我来说很好。可能您可以使用其他浏览器提供帮助，并与其他人分享。谢谢 这个解决方案的问题是它只会在屏幕上显示为大写，但是如果您需要在数据库中将文本作为大写，这个解决方案将无法正常工作。【参考方案10】：$(document).ready(function ()
$("#textbox").keyup(function (e)
var str = $(this).val();
$("#textbox").val(str.toUpperCase());
);
);
【讨论】：
小写转大写的最简单方法【参考方案11】：这是我自己想出来的一个解决方案，也避免了占位符变为大写的问题，并且不会弄乱光标位置。
注意：不改变字段的“值”，只改变显示。为此，请参见此处：Updating an input's value without losing cursor position
$(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+ 中工作。
小提琴：https://jsfiddle.net/GarryPas/ptez7q0q/3/
【讨论】：
【参考方案12】：我知道我迟到了，但我想提供这个：
(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 ));
它有这些优点：
保持占位符大写不变 立即将输入大写（在 keydown 时） 不移动光标 如果输入值是预填充的，则将其大写JS 小提琴here
【讨论】：
以上是关于使用 javascript 将用户类型转换为大写的主要内容，如果未能解决你的问题，请参考以下文章