如何使textfield中的所有内容都是大写字母/大写字母?

I want to make everything I write in a textfield to be capital letters. As I write, not after losing focus.

我想把我在textfield中写的所有东西都写成大写字母。我写的时候，不是在失去焦点之后。

How do I do this using jQuery?

如何使用jQuery进行此操作?

5 个解决方案

#1

I would use CSS for this.

我会用CSS。

Just add text-transform: uppercase to your styling, and then on the server side you can convert it to uppercase.

只需在样式中添加文本转换:大写，然后在服务器端可以将其转换为大写。

input {
  text-transform: uppercase;
}

#2

$('input[type=text]').keyup(function() {
    $(this).val($(this).val().toUpperCase());
});

#3

Use
oninput='this.value=this.value.toUpperCase();
This event is just for such cases, is fired after user input (pressing key) but before updating (displaying value), so with this typed text won't flicker while converting, and value is also correct (not like using only style to alter display without changing real data).

使用“this.value oninput = = this.value.toUpperCase();此事件仅适用于此类情况，在用户输入(按下键)后被触发，但在更新(显示值)之前，因此在转换时，该类型的文本不会闪烁，而且值也是正确的(不像仅使用样式来更改显示而不更改真实数据)。

#4

You may need to use combination of these.

您可能需要使用这些组合。

using the text-transform style only renders the type in upper-case, although the value may well be lower case.

使用文本转换样式只在大写的情况下呈现类型，尽管值很可能是小写的。

The javascript will only change current text to upper once the field changes or focus is lost

当字段更改或焦点丢失时，javascript将只将当前文本更改为upper

you can use gazler's jquery or simply inline javascript

您可以使用gazler的jquery或简单的内联javascript

e.g. onblur='javascript:this.value=this.value.toUpperCase();'

例如onblur = ' javascript:this.value = this.value.toUpperCase();“

This means that the text value will appear uppercase and actually be uppercased when the value changes / control loses focus.

这意味着当值更改/控件失去焦点时，文本值将显示为大写并实际显示为大写。

HTH Sam

HTH山姆

#5

To build on @Gazler's answer, an enhanced solution that better handles modifier keys ( assuming that you have a placeholder of mixed case and cannot set text-transform: uppercase; ):

要构建在@Gazler的答案上，一个增强的解决方案可以更好地处理修饰符密钥(假设您有一个混合案例的占位符，不能设置文本转换:大写):

$('.search-input input[type=text]').keyup(function() {
    var v = $(this).val();
    var u = v.toUpperCase();
    if( v != u ) $(this).val( u );
})

#1