[英]Change Input to Upper Case
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"。
I think the most elegant way is without any javascript but with css.我认为最优雅的方式是不使用任何 javascript 而是使用 css。 You can use
text-transform: uppercase
(this is inline just for the idea):您可以使用
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(),
Javascript string objects have a toLocaleUpperCase()
function that makes the conversion itself easy. Javascript 字符串对象有一个
toLocaleUpperCase()
函数,使转换本身变得容易。
Here's an example of 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: uppercase
on the textbox so that it appears uppercase 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.希望这可以帮助。
If you purpose it to a html input , you can easily do this without the use of JavaScript!如果您将其用于html 输入,则无需使用 JavaScript 即可轻松完成此操作! or any other JS libraries.
或任何其他 JS 库。 It would be standard and very easy to use a CSS tag text-transform :
使用 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!这样,你的代码就简单多了!
也可以这样做,但其他方法似乎更好,如果您只需要一次,这会派上用场。
onkeyup="this.value = this.value.toUpperCase();"
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.使用 value.toUpperCase 的解决方案似乎存在在字段中键入文本会将光标位置重置为文本末尾的问题。 Solutions using text-transform seem to have the problem that the text submitted to the server is still potentially lowercase.
使用 text-transform 的解决方案似乎存在提交给服务器的文本仍然可能是小写的问题。 This solution avoids those problems:
此解决方案避免了这些问题:
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)" />
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();
} );
我认为最简单的方法是使用 Bootstrap 的类“.text-uppercase”
<input type="text" class="text-uppercase" />
I couldn't find the text-uppercase in Bootstrap referred to in one of the answers.我在其中一个答案中找不到 Bootstrap 中提到的文本大写。 No matter, I created it;
没关系,我创造了它;
.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 类,这都会更改基础数据。
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.希望它可以帮助某人给他/她一个开发更好解决方案的想法。
<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();
});
Here we use onkeyup event in input field which triggered when the user releases a Key.这里我们在输入字段中使用onkeyup事件,该事件在用户释放 Key 时触发。 And here we change our value to uppercase by toUpperCase() function.
在这里,我们通过toUpperCase()函数将我们的值更改为大写。
Note that, text-transform="Uppercase" will only change the text in style.请注意, text-transform="Uppercase"只会更改样式中的文本。 but not it's value.
但不是它的价值。 So,In order to change value, Use this inline code that will show as well as change the value
因此,为了更改值,请使用此内联代码将显示以及更改值
<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
Here is the code snippet that proved the value is change这是证明值是变化的代码片段
<!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>
**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: uppercase; .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="**
you can try this HTML你可以试试这个 HTML
<input id="pan" onkeyup="inUpper()" />
javaScript脚本
function _( x ) {
return document.getElementById( x );
}
// convert text in upper case
function inUpper() {
_('pan').value = _('pan').value.toUpperCase();
}
Javascript has a toUpperCase()
method. Javascript 有一个
toUpperCase()
方法。 http://www.w3schools.com/jsref/jsref_toUpperCase.asp http://www.w3schools.com/jsref/jsref_toUpperCase.asp
So wherever you think best to put it in your code, you would have to do something like因此,无论您认为最好将它放在代码中的哪个位置,您都必须执行以下操作
$(".keywords").val().toUpperCase()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.