PrograBases: 03/08/2020 Inicio proyecto final (parte web)

Se creo una nuevo proyecto de asp.net en visual studio.
Se creo una pagina de inicio donde el usuario va a poder ingresar el numero de teléfono que quiere consultar.
Se investigo como se puede tener un label en la misma posición que el textbox y moverlo cuando el usuario da click, la respuesta encontrada fue la siguiente:

label {

order: -1;

padding-left: 5px;

transition: all 0.3s ease-in;

transform: translateY(20px);

pointer-events: none;

}

input:focus + label {

transform: translateY(-2px);

}

Cuando el input se encuentra enfocado se hace una transición en la posición "y" del label.
Para adaptar este código a la pagina web que se esta creando solo fue necesario actualizar los valores de y así como los nombres de los dos elementos.

Tras unas cuantas pruebas se noto que este código tenia un problema, y este es que no verifica si el input se encuentra vacío cuando sale de enfoque, esto hace que el texto que se haya escrito solape con el label. Para arreglar este se decidió acudir a la librería de jquery y aplicar el siguiente código:

$("#txtBoxNumeroDeTelefono").focus(function () {

$("#labelNumeroDeTelefono").css('transform', 'translateY(130px)');

}).focusout(function () {

var name = $.trim($(this).val()); // get the value of the input field

if (name == "") {

$("#labelNumeroDeTelefono").css('transform', 'translateY(150px)');

}

});

Cuando el input sale de enfoque este código verifica si hay texto en el input, en caso de haberlo no retorna el label a la posición original.
Este código también tenia un problema, y es que a la hora de hacer postback en la pagina web, el label retornaba a su posición original, haya o no algo escrito en el input, para resolver esto nuevamente se uso jquery, el código es el siguiente:

$.ajax({

beforeSend: function () {

complete: function () {

var name = $.trim($("#txtBoxNumeroDeTelefono").val());

if (name != "") {

$("#labelNumeroDeTelefono").css('transform', 'translateY(130px)');

}

});

Este código permite realizar acciones antes y después del postback, en este caso solo se añadió que después del postback se verificara si hay texto en el input, en cuyo caso mueve el label.

También se investigo como eliminar el borde que aparece alrededor del input cuando se da click en este. Para eliminarlo es solo necesario añadir el atributo "outline-width: 0;".

Se trabajo durante 3 horas.

Referencias:

PrograBases