Javascript 将输入更改为大写

Change Input to Upper Case

提问by Jshee

JS:

JS：

<script type="text/css">
$(function() {
    $('#upper').keyup(function() {
        this.value = this.value.toUpperCase();
    });
});
</script>

HTML

HTML

<div id="search">
        <input type="radio" name="table" class="table" value="professor" tabindex="1" /> Professor
        <input type="radio" name="table" class="table" value="department" tabindex="2" /> Department
        <input type="radio" name="table" id="upper" class="table" value="course" tabindex="3" /> Course
        <input type="text" name="search" class="keywords" value="Select an option..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?':this.value;" tabindex="4"  />
        <div id="content"> </div>
    </div>

Why is this still not working?? Just trying to call div ".keywords" from JS.

为什么这仍然不起作用？只是试图从 JS 调用 div ".keywords"。

回答by Tim

I think the most elegant way is without any javascript but with css. You can use text-transform: uppercase(this is inline just for the idea):

我认为最优雅的方式是不使用任何 javascript 而是使用 css。您可以使用text-transform: uppercase（这是内联的只是为了这个想法）：

<input id="yourid" style="text-transform: uppercase" type="text" />

Edit:

编辑：

So, in your case, if you want keywords to be uppercase change: keywords: $(".keywords").val(),to $(".keywords").val().toUpperCase(),

所以，你的情况，如果你想要的关键字是大写的变化： keywords: $(".keywords").val(),以$(".keywords").val().toUpperCase(),

回答by Lightness Races in Orbit

Javascript string objects have a toLocaleUpperCase()function that makes the conversion itself easy.

Javascript 字符串对象具有toLocaleUpperCase()使转换本身变得容易的函数。

Here's an exampleof live capitalisation:

以下是实时大写的示例：

$(function() {
    $('input').keyup(function() {
        this.value = this.value.toLocaleUpperCase();
    });
});

---

---

Unfortunately, this resets the textbox contents completely, so the user's caret position (if not "the end of the textbox") is lost.

不幸的是，这会完全重置文本框内容，因此用户的插入符号位置（如果不是“文本框的结尾”）丢失了。

You can hack this back in, though, with some browser-switching magic:

不过，您可以使用一些浏览器切换魔法来破解它：

// Thanks http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
function getCaretPosition(ctrl) {
    var CaretPos = 0;    // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
        CaretPos = ctrl.selectionStart;
    }

    return CaretPos;
}

function setCaretPosition(ctrl, pos) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}


// The real work

$(function() {
    $('input').keyup(function() {
        // Remember original caret position
        var caretPosition = getCaretPosition(this);

        // Uppercase-ize contents
        this.value = this.value.toLocaleUpperCase();

        // Reset caret position
        // (we ignore selection length, as typing deselects anyway)
        setCaretPosition(this, caretPosition);
    });
});

---

---

Ultimately, it might be easiest to fake it. Set the style text-transform: uppercaseon the textbox so that it appearsuppercase to the user, then in your Javascript apply the text transformation once whenever the user's caret focus leaves the textbox entirely:

最终，伪造它可能是最容易的。text-transform: uppercase在文本框上设置样式，使其对用户显示为大写，然后在您的 Javascript 中，只要用户的插入符号焦点完全离开文本框，就应用一次文本转换：

HTML:

HTML：

<input type="text" name="keywords" class="uppercase" />

CSS:

CSS：

input.uppercase { text-transform: uppercase; }

Javascript:

Javascript：

$(function() {
    $('input').focusout(function() {
        // Uppercase-ize contents
        this.value = this.value.toLocaleUpperCase();
    });
});

Hope this helps.

希望这可以帮助。

回答by Crouch

Can also do it this way but other ways seem better, this comes in handy if you only need it the once.

也可以这样做，但其他方法似乎更好，如果您只需要一次，这会派上用场。

onkeyup="this.value = this.value.toUpperCase();"

回答by Ebrahim

If you purpose it to a html input, you can easily do this without the use of JavaScript! or any other JS libraries. It would be standard and very easy to use a CSS tag text-transform:

如果您将其用于html 输入，则无需使用 JavaScript 即可轻松完成此操作！或任何其他 JS 库。使用 CSS 标签text-transform将是标准且非常容易的：

<input type="text" style="text-transform: uppercase" >

or you can use a bootstrap class named as "text-uppercase"

或者您可以使用名为“text-uppercase”的引导程序类

<input type="text" class="text-uppercase" >

In this manner, your code is much simpler!

这样，你的代码就简单多了！

回答by BlueMonkMN

Solutions using value.toUpperCase seem to have the problem that typing text into the field resets the cursor position to the end of the text. Solutions using text-transform seem to have the problem that the text submitted to the server is still potentially lowercase. This solution avoids those problems:

使用 value.toUpperCase 的解决方案似乎存在在字段中输入文本会将光标位置重置为文本末尾的问题。使用 text-transform 的解决方案似乎存在提交给服务器的文本仍然可能是小写的问题。此解决方案避免了这些问题：

function handleInput(e) {
   var ss = e.target.selectionStart;
   var se = e.target.selectionEnd;
   e.target.value = e.target.value.toUpperCase();
   e.target.selectionStart = ss;
   e.target.selectionEnd = se;
}

<input type="text" id="txtTest" oninput="handleInput(event)" />

回答by BiAiB

try:

尝试：

$('#search input.keywords').bind('change', function(){
    //this.value.toUpperCase();
    //EDIT: As  Mike Samuel suggested, this will be more appropriate for the job
    this.value = this.value.toLocaleUpperCase();
} );

回答by arame3333

I couldn't find the text-uppercase in Bootstrap referred to in one of the answers. No matter, I created it;

我在其中一个答案中找不到 Bootstrap 中提到的文本大写。没关系，我创造了它；

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

This displays text in uppercase, but the underlying data is not transformed in this way. So in jquery I have;

这以大写形式显示文本，但基础数据不会以这种方式转换。所以在jquery中我有；

$(".text-uppercase").keyup(function () {
    this.value = this.value.toLocaleUpperCase();
});

This will change the underlying data wherever you use the text-uppercase class.

无论您在何处使用 text-uppercase 类，这都会更改基础数据。

回答by Venkat

onBlur="javascript:{this.value = this.value.toUpperCase(); }

will change uppercase easily.

将轻松更改大写。

Demo Here

演示在这里

回答by Tar?k Seyceri

This answer has a problem:

这个回答有问题：

style="text-transform: uppercase"

it also converts the place holder word to upper case which is inconvenient

它还将占位符单词转换为大写，这很不方便

placeholder="first name"

when rendering the input, it writes "first name" placeholder as uppercase

呈现输入时，它将“名字”占位符写为大写

FIRST NAME

so i wrote something better:

所以我写了更好的东西：

onkeypress="this.value = this.value + event.key.toUpperCase(); return false;"

it works good!, but it has some side effects if your javascript code is complex,

效果很好！但如果您的 javascript 代码很复杂，它会产生一些副作用，

hope it helps somebody to give him/her an idea to develop a better solution.

希望它可以帮助某人给他/她一个开发更好解决方案的想法。

回答by Musa

<input id="name" data-upper type="text"/>
<input id="middle" data-upper type="text"/>
<input id="sur" data-upper type="text"/>

Upper the text on dynamically created element which has attribute upper and when keyup action happens

动态创建的元素上的文本，该元素具有属性 upper 和 keyup 动作发生时

$(document.body).on('keyup', '[data-upper]', function toUpper() {
  this.value = this.value.toUpperCase();
});