Instantly share code, notes, and snippets.

Embed
What would you like to do?
<style>
.input-upper { text-transform: uppercase }
.input-upper::-webkit-input-placeholder { text-transform: none }
.input-upper::-moz-placeholder { text-transform: none }
.input-upper:-moz-placeholder { text-transform: none }
.input-upper:-ms-placeholder { text-transform: none }
</style>
<form>
<input type="text" class="input-upper" placeholder="Inputan user" />
</form>
<form>
<input type="text" class="input-upper" placeholder="Inputan user" />
</form>
<script>
// ketika document sudah siap (termasuk jquery sudah terload)
$(document).ready(function() {
// tunggu jika ada input di element yang punya class 'input-upper'
$('.input-upper').bind('input', function() {
// ubah nilainya menjadi kapital
$(this).val($(this).val().toUpperCase())
})
})
</script>
<form>
<input type="text" class="input-upper" placeholder="Inputan user" />
</form>
<script>
// ambil yang memiliki class 'input-upper', akan menghasil kan array element yg memiliki class 'input-upper'
var input = document.querySelectorAll('.input-upper')
// lakukan perulangan utk setiap elemnt di array apabila ada sebuah event input
for (var i = 0; i < input.length; i++) {
// saat ada event input (user sedang melakukan input)
input[i].addEventListener('input', function() {
// nilai yg ada di inputan diubah menjadi uppercase
this.value = this.value.toUpperCase();
})
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment