将输入更改为大写答案

【问题标题】：Change Input to Upper Case将输入更改为大写
【发布时间】：2011-08-11 01:20:23
【问题描述】：

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

【问题讨论】：

我希望我有时间把我认为最好的答案放在这里。它是处理按键事件并将键码更改为大写（如果适用），使跨浏览器兼容比听起来容易，但我认为这是最好的解决方案。
实际上我想的解决方案只适用于 IE...e.which 在 FF 和 WebKit 中是只读的，但 IE 允许您更改 e.keyCode。在 IE 中试试这个 jsfiddle.net/48fSq/1

标签： javascript jquery

【解决方案1】：

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

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

编辑：

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

【讨论】：

@Tim - 你不能有 INPUT 的结束标签：w3.org/TR/html401/interact/forms.html#edef-INPUT
用户输入真的是大写还是只是在这里显示？
需要记住，使用（仅）JavaScript 检索值将返回原始文本；即不是大写。 Example here
如果你只是想让它看起来大写，那么这可能是真的。但是，如果您希望实际的 input.value 为大写，则必须在提交表单或使用 input.value 之前重复您的工作，这使得它不那么优雅。
这个简单的想法把我从事件交互女巫的酿造地狱的火热深处救了出来。愿系统风扇风一直在你背后，愿散热器温暖你的脸。

【解决方案2】：

Javascript 字符串对象有一个toLocaleUpperCase() 函数，可以让转换本身变得简单。

Here's an example 的实时大写：

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

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

不过，您可以 hack this back in 使用一些浏览器切换魔法：

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

希望这会有所帮助。

【讨论】：

+1 没有考虑丢失选择问题（以及丢失光标）。当它发生时，它是如此烦人。这是对我最好的答案
@Tomalak - 在第一个示例中，为什么不使用 focusout？
@Jared：我假设 OP 希望文本框内容自动大写当用户键入。我当然会。
@Tomalak - Yeesh。在focusout上修改起来要简单得多......但这是第一句话。我至少会提出论点，但这不是我的答案，所以这只是一个评论。 :)
@SJnawali 问题是您没有阅读 whole 答案。 text-transform: uppercase 用于打字时；当焦点离开控件时，该值将被其等效的大写字母覆盖。

【解决方案3】：

使用 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;
}

&lt;input type="text" id="txtTest" oninput="handleInput(event)" /&gt;

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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();
} );

【讨论】：

您需要在某处分配结果，这将不起作用，因为用户键入 change 仅在控件失去焦点时才会触发。
对于用户输入，.toLocaleUpperCase 可能更合适。 developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
@Mike Samuel 你说得对，我不知道那种方法。希望它是跨浏览器，因为我在 Msdn 上看到它，我会更新我的答案
@BiAiB: This is broken;您没有将文本的大写版本分配给任何内容。
@BiAiB, toLocaleUpperCase 可跨浏览器使用，但它的行为在同一区域设置的不同浏览器中不一定相同，因为它显然取决于本地计算机上存在的字符映射的版本。它在 EcmaScript 语言标准的第 15.5.4.17 节中指定。干杯，迈克

【解决方案7】：

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

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

【讨论】：

这与其他答案有何不同？

【解决方案8】：

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

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

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

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

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

【讨论】：

【解决方案9】：

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

会轻松更改大写。

Demo Here

【讨论】：

【解决方案10】：

这个答案有问题：

style="text-transform: uppercase"

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

placeholder="first name"

在渲染输入时，它将“名字”占位符写为大写

FIRST NAME

所以我写了一些更好的东西：

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

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

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

【讨论】：

【解决方案11】：

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

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

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

这是证明值是变化的代码sn-p

<!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>

【讨论】：

【解决方案12】：

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

在具有属性的动态创建元素上增加文本上以及何时发生 keyup 操作

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

【讨论】：

upper 不是有效属性，您应该改用data-upper。在 CSS 中使用 text-transform 以及类似这样的东西的主要原因是用户看不到它从小写转换为大写。你的函数也是匿名的，给它一个名字是没有意义的:)

【解决方案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="**

【讨论】：

<script type="text/css"> 永远不会以这种方式工作

【解决方案14】：

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

因此，无论您认为最好将其放入代码中的哪个位置，您都必须执行类似

的操作

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

【讨论】：

我将如何只为课程调用执行此操作？？
有很多方法可以做到这一点。最快最简单的方法就是把它放在“课程”的箱子里。
我该怎么做：case 'course': phppage = 'course';分机 = '.php?cID=';休息;
对不起，我有点困惑如何实现它（虽然很基本）

【解决方案15】：

你可以试试这个 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();
  }

【讨论】：