将输入更改为大写

Question

JS：

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

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>

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

Answer 1

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

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

编辑：

因此，在您的情况下，如果您希望关键字为大写，请更改： keywords: $(".keywords").val(),到$(".keywords").val().toUpperCase(),

Answer 2

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

以下是实时大写的示例：

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

---

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

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

// 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);
    });
});

---

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

HTML：

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

CSS：

input.uppercase { text-transform: uppercase; }

Javascript：

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

希望这可以帮助。

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

使用 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)" />

Answer 6

尝试：

$('#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();
} );

Answer 7

我认为最简单的方法是使用 Bootstrap 的类“.text-uppercase”

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

Answer 8

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

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

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

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

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

Answer 9

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

将轻松更改大写。

演示在这里

Answer 10

这个回答有问题：

style="text-transform: uppercase"

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

placeholder="first name"

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

FIRST NAME

所以我写了更好的东西：

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

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

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

Answer 11

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

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

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

Answer 12

这里我们在输入字段中使用onkeyup事件，该事件在用户释放 Key 时触发。 在这里，我们通过toUpperCase()函数将我们的值更改为大写。

请注意， text-transform="Uppercase"只会更改样式中的文本。 但不是它的价值。 因此，为了更改值，请使用此内联代码将显示以及更改值

<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">

这是证明值是变化的代码片段

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form method="get" action=""> <input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();"> <input type="button" name="" value="Submit" onclick="checking()"> </form> <script type="text/javascript"> function checking(argument) { // body... var x = document.getElementById("test-input").value alert(x); } </script> </body> </html>

Answer 13

**JAVA SCRIPT**
<html>
<body>
<script>
function @ToCaps(obj)
{
obj.value=obj.value.toUpperCase();
}
</script>
<input type="text" onkeyup=@ToCaps(this)"/>
</body>
</html>

**ASP.NET**
Use a css style on the text box, write css like this:

.ToCaps { 文本转换：大写； }

<asp:TextBox ID="TextBox1" runat="server" CssClass="ToCaps"></asp:Te writxtBox>

**OR**
simply write this code in textbox
<asp:TextBox ID="TextBox1" runat="server" style="text-transform:uppercase"></asp:TextBox>


 **1.Note you don't get intelligence until you type up to style="**  

Answer 14

你可以试试这个 HTML

<input id="pan" onkeyup="inUpper()" />

脚本

function _( x ) {
  return document.getElementById( x );
}
  // convert text in upper case
  function inUpper() {
    _('pan').value = _('pan').value.toUpperCase();
  }

Answer 15

Javascript 有一个toUpperCase()方法。 http://www.w3schools.com/jsref/jsref_toUpperCase.asp

因此，无论您认为最好将它放在代码中的哪个位置，您都必须执行以下操作

$(".keywords").val().toUpperCase()