Limpiar un input file con jQuery

Hace bastante tiempo que no escribo nada porque ando bastante liado, pero me ha parecido bastante interesante compartir esto. El problema surge cuando tras subir un fichero a nuestro servidor queremos limpiar el contenido de nuestro input file desde cliente (por ejemplo, con jQuery). La primera aproximación podría ser esta

$('#fileupload').attr({ value: '' });

Si hemos trabajado algo con web sabemos que esta opción no es válida porque por motivos de seguridad el control es de solo lectura y no podemos modificar su contenido. La solución pasa por volver a crear el control usando el método clone de jQuery.

$fileupload = $('#fileupload');
$fileupload.replaceWith($fileupload.clone(true));

El método clone admite dos parámetros que nos permitirá conservar los valores y los manejadores de los eventos que tengamos definidos en nuestro control o controles hijos.

Espero que les sea útil. Happy coding!

jQuery desactivar el menú contextual del navegador

Para desactivar el menú contextual (típicamente el menú que sale a hacer click con el botón derecho sobre la página cargada) tan solo deberemos añadir el siguiente código a nuestra página

$(document).ready(function(){
    $(document).bind("contextmenu", function(e){
        return false;
    });
});

Si lo quisiéramos poner en todas las páginas de nuestra aplicación web tan solo debemos poner el código anterior en nuestra MasterPage (ASP.NET) o Layout Page (ASP.NET MVC).

Happy coding!

jQuery maxlength en un textbox multilinea (textarea)

Si alguna vez hemos usado en asp.net los textbox multilinea nos habremos dado cuenta que la propiedad maxlength no funciona.

<asp:TextBox ID="TextBoxMultiLine" MaxLength="1" TextMode="MultiLine" runat="server"></asp:TextBox>

Que en html quedaría

<textarea name="ctl00$MainContent$TextBoxMultiLine" rows="2" cols="20" id="MainContent_TextBoxMultiLine"></textarea>

Para hacer que funcione podemos usar el siguiente código en jQuery

$(document).ready(function () {
  $('[id$=_TextBoxMultiLine]').keypress(function (e) {
    if ($(this).val().length + 1 > 1)
      e.preventDefault();
  });
});

El motivo de usar en el selector de jQuery el identificador _TextBoxMultiLine, es por la forma que tiene ASP.NET de asegurarse que un identificador sea único en la página. Si usamos ASP.NET 4.0 podemos hacer uso del modificador ClientIDMode y asignarlo con Static para evitar que el ID cambie. En se caso el script quedaría de la siguiente

<asp:TextBox ID="TextBoxMultiLine" MaxLength="1" TextMode="MultiLine" ClientIDMode="Static" runat="server"></asp:TextBox>

$(document).ready(function () {
  $('#TextBoxMultiLine').keypress(function (e) {
    if ($(this).val().length + 1 > 1)
      e.preventDefault();
  });
});

Otra posibilidad es no poner usar el atributo ClientIDMode y usar el ClientID de la siguiente manera

$(document).ready(function () {
  $('#<%= TextBoxMultiLine.ClientID %>').keypress(function (e) {
    if ($(this).val().length + 1 > 1)
      e.preventDefault();
  });
});

Si no queremos usar jQuery, podríamos llamar al un método en el evento keyUp. Para eso añadimos esto en el Page_Load de nuestra página

TextBoxMultiLine.Attributes.Add("onKeyUp", "Count(this, 1)");

function Count(text, long) {
  var maxlength = new Number(long);
  if (text.value.length > maxlength) 
    text.value = text.value.substring(0, maxlength);  
}

Happy coding!

jQuery input text numérico

Aquí les dejo un pequeño trozo de código para hacer que un input de tipo text solo admita caracteres numéricos ([0-9])

$('input').keydown(function(e) {  
  // Admite [0-9], BACKSPACE y TAB
  if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105) && e.keyCode != 8 && e.keyCode != 9)
      e.preventDefault();
});

Pueden probar el código aquí ( http://jsfiddle.net/z2aEL/ )

Happy coding!