发表新帖
发表新帖

Change Input to Upper Case

前端 未结
关注
15 769
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-12-07 22:02

JS:
相关标签:
15条回答
  • 攒了一身酷
    2020-12-07 22:16

    I think the most elegant way is without any javascript but with css. You can use text-transform: uppercase (this is inline just for the idea):

    <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(),

    0 讨论(0)
  • 梦毁少年i
    2020-12-07 22:16

    If you purpose it to a html input, you can easily do this without the use of JavaScript! or any other JS libraries. It would be standard and very easy to use a CSS tag text-transform:

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

    or you can use a bootstrap class named as "text-uppercase"

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

    In this manner, your code is much simpler!

    0 讨论(0)
  • 旧巷少年郎
    2020-12-07 22:25

    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. Solutions using text-transform seem to have the problem that the text submitted to the server is still potentially lowercase. 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)" />

    0 讨论(0)
  • 后悔当初
    2020-12-07 22:25

    Can also do it this way but other ways seem better, this comes in handy if you only need it the once.

    onkeyup="this.value = this.value.toUpperCase();"
    0 讨论(0)
  • 清酒与你
    2020-12-07 22:26

    Javascript string objects have a toLocaleUpperCase() function that makes the conversion itself easy.

    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:

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

    Hope this helps.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-07 22:29 
    **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 讨论(0)
 看不清?
提交回复
热议问题