将输入更改为大写

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(),to$(".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

尝试:

$('#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 6

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