题 将输入更改为大写


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


56
2018-04-22 15:41


起源


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


答案:


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

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

编辑:

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


210
2018-04-22 15:44



@Tim - 你不允许有INPUT的结束标记: w3.org/TR/html401/interact/forms.html#edef-INPUT - Jared Farrish
用户输入真的是大写还是只是在这里显示? - BiAiB
需要记住的是,使用(只)JavaScript检索值将返回原始文本;即不是大写的。 这里的例子 - Shaz
如果你只是想让它看起来大写,那么这可能是真的。但是,如果您希望实际的input.value为大写,则必须在提交表单之前复制您的工作,或者使用input.value,这使得它不那么优雅。 - Juan Mendes
这个简单的想法让我远离了事件互动女巫酿酒地狱的火热深处。可能系统风扇始终在你的背后,愿散热片在你的脸上闪耀。 - Jeromy French


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

希望这可以帮助。


43
2018-04-22 15:46



+1没有想到选择问题的丢失(以及光标的丢失)。当它发生时它太烦人了。这是对我来说最好的答案 - BiAiB
@Tomalak - 在第一个例子中,为什么不使用focusout? - Jared Farrish
@Jared:我假设OP希望文本框内容自动为大写 作为用户类型。我当然会。 - Lightness Races in Orbit
@Tomalak - Yeesh。在焦点上修改这么简单......但这是第一句话。我至少会提出这个论点,但这不是我的答案,所以这只是一个评论。 :) - Jared Farrish
@SJnawali问题是你没看过 整个 回答。 text-transform: uppercase 是为了打字;当焦点离开控件时,该值将被其大写等效值覆盖。 - Lightness Races in Orbit


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

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

6
2017-11-15 10:29





尝试:

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

5
2018-04-22 15:44



您需要在某处分配结果,这不会像用户输入的那样起作用 change 仅在控件失去焦点时才会触发。 - Lightness Races in Orbit
对于用户输入, .toLocaleUpperCase 可能更合适。 developer.mozilla.org/en/JavaScript/Reference/Global_Objects/... - Mike Samuel
@Mike Samuel你是真的,我不知道那个方法。希望它是交叉浏览器,因为我在Msdn上看到它,我会更新我的答案 - BiAiB
@BiAiB: 这已破了;您没有将文本的大写版本分配给任何内容。 - Lightness Races in Orbit
@BiAiB, toLocaleUpperCase 可以跨浏览器使用,但它的行为在同一语言环境中的不同浏览器中不一定相同,因为它显然取决于本地计算机上存在的字符映射的版本。它在EcmaScript语言标准的第15.5.4.17节中规定。欢呼,迈克 - Mike Samuel


如果你的目的是为了 HTML输入, 你可以轻松地做到这一点,而无需使用javascript。 这将是标准的并且非常容易使用现代CSS标签:

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

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

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

4
2018-04-06 20:24





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

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


4
2017-07-12 20:45





我在其中一个答案中找不到Bootstrap中的text-uppercase。无论如何,我创造了它;

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

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

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

这将在您使用text-uppercase类的任何位置更改基础数据。


2
2018-01-29 12:12





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

将轻松改变大写。

在这里演示


2
2018-06-24 13:02





这个答案有一个问题:

style="text-transform: uppercase"

它还将占位符字转换为大写字母,这是不方便的

placeholder="first name"

在渲染输入时,它将“first name”占位符写为大写

FIRST NAME

所以我写了更好的东西:

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

它工作得很好!但如果你的javascript代码很复杂,它有一些副作用,

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


1
2018-04-20 12:07





**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; }

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

0
2017-07-09 05:12



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