Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17504
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input type number aparecendo igual em todos os navegadores

24-01-2016 17:40

O input type number do HTML 5 é mostrado de forma diferente em cada tipo de navegador.
Nesse post vou mostrar como fazer o "input type number" ter a mesma aparência em todos os navegadores.

Para padronizar a aparência do input type number pode-se usar um plugin jQuery chamado Spinner.
Esse plugin em jQuery tem a mesma função do input number só que com vários recursos extras.
Você pode usar para aumentar e diminuir: tempo, valores em moeda, anos, etc.

Para um exemplo básico basta testar o código abaixo

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Spinner - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { var spinner = $( "#spinner" ).spinner(); $( "#disable" ).click(function() { if ( spinner.spinner( "option", "disabled" ) ) { spinner.spinner( "enable" ); } else { spinner.spinner( "disable" ); } }); $( "#destroy" ).click(function() { if ( spinner.spinner( "instance" ) ) { spinner.spinner( "destroy" ); } else { spinner.spinner(); } }); $( "#getvalue" ).click(function() { alert( spinner.spinner( "value" ) ); }); $( "#setvalue" ).click(function() { spinner.spinner( "value", 5 ); }); $( "button" ).button(); }); </script> </head> <body> <p> <label for="spinner">Select a value:</label> <input id="spinner" name="value"> </p> <p> <button id="disable">Toggle disable/enable</button> <button id="destroy">Toggle widget</button> </p> <p> <button id="getvalue">Get value</button> <button id="setvalue">Set value to 5</button> </p> </body> </html>

Para a documentação do Spinner acesse http://api.jqueryui.com/spinner/
Para alguns exemplos de uso do Spinner acesse https://www.tjvantoll.com/2012/07/15/na ... ch-to-use/
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado