1. Home
  2. Javascript
  3. Função Javascript para formatar uma url amigável digitada pelo usuário

Função Javascript para formatar uma url amigável digitada pelo usuário

Índice

Função javascript para formatar a url amigável pode exemplo de uma página, digitada pelo usuário, a função aceita somente letras, números e traços, transforma espaço em traço, transforma maiúsculas em minúsculas e remove os caracteres inválidos ao colar um texto no campo.

Exemplos de input válidos:

var urlInput = {};

urlInput.keyPress = function (e) {
	var e = e || window.event;
	var key = e.charCode;
	if (key === undefined)
		key = e.keyCode;

	//maiusculas, minusculas, números e traço
	if ((key >= 65 && key <= 90) || (key >= 97 && key <= 122) || (key >= 48 && key <= 57) || (key == 45) || (key == 32))
		return true;

	//Não imprime letra
	if (key == 0)
		return true;

	return false;
}

urlInput.keyUp = function (txt) {
	txt.value = txt.value.replace(/[\s]/gi, '-'); //Transforma espaço em traço
	txt.value = txt.value.toLowerCase();
	txt.value = txt.value.replace(/[^a-z0-9--]/gi, ''); //Remove tudo que não for letras, números ou traço
	return true;
}

E no HTML da página:

<input type="text" id="txtUrl"
	onkeypress="return urlInput.keyPress(event);"
	onkeyup="return urlInput.keyUp(this);" />

Exemplo no codepen: http://codepen.io/educoutinho/pen/KaQLQx

Comentários