Dica 01 - Prevenir “Recortar”, “Copiar” e “Colar” informações de um TextBox.
É bem útil quando estamos criando formulário onde o usuário deve digitar o e-mail em um campo e digitá-lo novamente em outro para que possamos verificar se os mesmos são idênticos.
Listagem 01
<html>
<script type="text/javascript">
$(document).ready(
function() {
$("#txtName").bind('cut copy paste', function(e){
e.preventDefault();
var _type = "";
switch(e.type)
{
case "cut":
_type = "cortar";
break;
case "copy":
_type = "copiar";
break;
case "paste":
_type = "colar";
break;
}
alert("Voce nao pode " + _type + " o texto");
});
});
</script>
<body>
<div id="hello">
<input type="text" id="txtName" />
</div>
</body>
</html>
O que fizemos foi definir no método bind() do jQuery quais eventos estamos monitorando, coloquei um “switch” para podermos exibir as informações em português, verificamos qual deles foi lançado e fazemos a conversão, tudo muito simples.
Dica 02 – Prevenir digitação de letras ou números
Listagem 02 – permitir somente números
<html>
<script type="text/javascript">
$(document).ready(
function() {
$("#txtName").bind('keyup blur', function(e){
e.preventDefault();
if(this.value.match(/[a-zA-Z]/g))
{
this.value = this.value.replace(/[a-zA-Z]/g,'');
}
});
});
</script>
<body>
<div id="hello">
<input type="text" id="txtName" />
</div>
</body>
</html>
Listagem 03 – permitir somente letras
<html>
<script type="text/javascript">
$(document).ready(
function() {
$("#txtName").bind('keyup blur', function(e){
e.preventDefault();
if(this.value.match(/[0-9]/g))
{
this.value = this.value.replace(/[0-9]/g,'');
}
});
});
</script>
<body>
<div id="hello">
<input type="text" id="txtName" />
</div>
</body>
</html>
Novamente utilizamos a função “bind()” para monitorarmos os eventos keyup e blur.
Utilizamos também expressão regular para informar, no primeiro código, que não são permitidas a inserção de letras no campo “/[a-zA-Z]/g”.
No segundo código invertemos, fazendo com que sejam permitidas entrada de caracteres não numéricos “/[0-9]/g”.
Dica 03 – evite chamar o mesmo objeto várias vezes
Muitas vezes precisamos carregar um objeto para podermos trabalhar com ele, a maioria dos programadores fazem como na listagem abaixo:
Listagem 04
$('#txtName').css('background-color', '#00f0a0');
$("#txtName").val("digite seu nome");
$('#txtName').addClass('inputbord');
$('#txtName').show(1000);
Porem devemos carregar o objeto apenas uma vez conforme abaixo:
Listagem 05
var objName = $('#txtName');
objName.css('background-color', '#00f0a0');
objName.val("digite seu nome");
objName.addClass('inputbord');
objName.show(1000);
Desta forma mantemos a variável em cache e pronta para uso!
Estas são dicas bem simples mas que muitas vezes são bem úteis, espero que aproveitem.