Change Input to Upper Case

Change Input to Upper Case

<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>
 
<input id="yourid" style="text-transform: uppercase" type="text" />

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

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

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

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

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

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

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

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

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

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

style="text-transform: uppercase"

placeholder="first name"

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

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

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

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

0 nhận xét:

Đăng nhận xét

Tìm kiếm