Skip to content

Instantly share code, notes, and snippets.

@jozadaquebatista

jozadaquebatista/index.html

Created October 12, 2016 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jozadaquebatista/7974043ea190653456fd1102b6746f25 to your computer and use it in GitHub Desktop.
Save jozadaquebatista/7974043ea190653456fd1102b6746f25 to your computer and use it in GitHub Desktop.
Download ZIP
A sample mask for textfields
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MaskField</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<h1>Simple Form</h1>
<input class="form-control" id="btnSend" type="text" name="name" value="" maxlength="4" placeholder="00,00%" />
<input class="btn btn-default" id="limpar" type="button" name="name" value="limpar" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script-js.js"></script>
</script>
</body>
</html>
Raw
script-js.js
var campo = document.querySelector('#btnSend')
var btn = document.querySelector('#limpar')
var clist = []
document.querySelector('body').addEventListener('keydown', function() {
campo.focus()
})
campo.addEventListener('keydown', function() {
clist.push(this.value[this.value.toString().length - 1])
setTimeout(function() {
campo.value = campo.value
.replace(/\D/, '')
.replace(/(\d{2})(\d{2})/, '$1,$2%')
.slice(0, 6)
}, 100)
console.log(this.value.split(''))
for (let i = 0; i < campo.getAttribute('maxlength').split(''); i++) {
if (i === '') {
campo.value += '0'
}
}
})
campo.addEventListener('change', function() {})
btn.addEventListener('click', function() {
campo.value = ''
clist = []
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment