将input更改为大写

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”。

我认为最优雅的方式是没有任何JavaScript,但与CSS。 你可以使用text-transform: uppercase (这是内联只是为了这个想法):

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

编辑:

所以,对于你的情况,如果你想要关键字是大写的更改: keywords: $(".keywords").val(), to $(".keywords").val().toUpperCase(),

JavaScriptstring对象有一个toLocaleUpperCase()函数,使转换本身很容易。

以下是一个实时资本化的例子 :

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

不幸的是,这完全重置了文本框内容,所以用户的插入位置(如果不是“文本框的末尾”)丢失了。

尽pipe如此,您仍然可以用一些浏览器切换的魔法来解决这个问题:

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

希望这可以帮助。

尝试:

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

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

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

如果你的目的是htmlinput ,你可以轻松地做到这一点,而不使用JavaScript。 这将是标准的,非常容易使用现代的CSS标签:

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

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

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

使用value.toUpperCase的解决scheme似乎有一个问题,即在该字段中键入文本会将光标位置重置为文本的末尾。 使用文本转换的解决scheme似乎有一个问题,即提交给服务器的文本仍然可能是小写字母。 这个解决scheme避免了这些问题:

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

我在其中一个答案中找不到Bootstrap中的大写字母。 无论如何,我创造了它;

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

这会以大写显示文本,但底层数据不会以这种方式转换。 所以在jQuery中我有;

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

无论你使用文本大写的类,这都会改变底层的数据。

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

会轻易改变大写字母。

在这里演示

 **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 {text-transform:大写; }

 <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="** 

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

所以,只要你认为把它放在你的代码中,你就不得不这样做

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