Novas tags html5

[Chirlison 1]

Boa tarde a todos!

Pessoal, alguém sabe se no html 5 existe este componente da imagem abaixo:

Caso não exista, alguém sabe como eu poderia criá-lo ou não tem jeito.

Como ele funciona:

Ao clicar na setinha para baixo, os valores mudam, ao clicar para cima os valores também mudam.

Obs: esta imagem eu tirei do photoshop.

 

Desde já, muito obrigado a todos que puderem me ajudar.

[Thiago Souza_63114 1]

Eu conheço o <input type="number" required> :)

você pode colocar tipo <input type="number" max="10" min="5" value="5" required>

tem valores legais para aplicar

[Chirlison 1]

Thiago Souza_63114, muito obrigado pela ajuda.

Não funciona no firefox nem no ie.

Teria como pular de 25 em 25 até 1000.

Por exemplo: 25, 50, 75, 100, .. , 1000.

[Thiago Souza_63114 1]

Amigo isso no caso e melhor usar um Jquery ou criar um select tipo com 25, 50, 75, 100, .. , 1000.

[Chirlison 1]

Thiago Souza_63114, consegui fazer com que os valores pulem de 25 em 25 até 1000.

Pena qua não funciona no ie e no firefox.

Veja o exemplo abaixo do que fiz.

<input type="number" name="age" min="" max="1000" step="25" />

[Thiago Souza_63114 1]

Por isso falei para usar o Jquery ou um select :)

o HTML5 e muito novo

[Diegus Miestro 21]

É, eu também acho cedo usar HTML5

 

Como fiz isso semana passada e ainda tá no meu PC, deixarei aqui uma solução:

 

HTML:

<input type="button" value="-" class="modVal" />
<input type="text" class="result" readonly />
<input type="button" value="+" class="modVal" />

 

JS com Jquery:

$(function(){    
   var $valorExibido = $("#addSubVal input.result"); // Pega o INPUT onde será exibido o resultado
   var $botaoMudarValor = $("#addSubVal input.modVal"); // Pega os INPUTs que servirão para somar ou reduzir valor

   $valorExibido.attr({value: "10"}); // Define um valor padrão que será exibido ao carregar a página

   $botaoMudarValor.click(function(){ // função que muda o valor quando os botoes de mudança forem clicados
       var $novoValor; //Variável para novo valor a ser implementado
       var $valorBotao = $(this).attr("value"); // Pega VALUE do INPUT que foi clicado
       var $valorAtual = $valorExibido.attr("value"); // Pega o VALUE do INPUT que exibe o valor atual
       var $valorModificador = 1; // A proporção de mudança a cada clique
       var $valorMaximo = 20; // Valor máximo aceito
       var $valorMinimo = 0; // Valor mínimo aceito

       switch($valorBotao){ // Validar VALUE adquirido do botão que foi clicado
           case "+":
               $novoValor = parseInt($valorExibido.attr("value")) + (($valorAtual < $valorMaximo) ? ($valorModificador)  : (0)); // Caso o valor atual seja menor que o valor máximo ele acrescendo o valor modificador, caso não acrescenta 0.
               break;
           case "-":
               $novoValor = parseInt($valorExibido.attr("value")) - (($valorAtual > $valorMinimo) ? ($valorModificador)  : (0)); // // Caso o valor atual seja maior que o valor mínimo ele diminui o valor modificador, caso não diminui 0.
               break;
       }        
       $valorExibido.attr({value: $novoValor}); // Insere o novo valor Modificado no INPUT de exibe o valor
   }); // Fecha a função
});

 

PS1: O valor default, caso queira começar do 0 é somente trocar o 10 por 0;

PS2: Como você quer de 25 em 25 é só trocar o valor 1 do Switch por 25 e se não quiser um valor máximo é somente tirar o código referente ao case "+".

 

EDIT:

 

Mudei o código JS para algo que considero mais organizado e didático do que estava.

[William Bruno 1501]

de uma forma bem simples, e apenas com js puro:

http://forum.imasters.com.br/topic/412862-aumentar-diminuir-input/page__view__findpost__p__1623941

[André do Vale 76]

Esse tópico me deixou tão "encucado", que resolvi arranjar uma maneira de não abandonar o uso do input do tipo "number", e ainda organizar a forma como é exibido para a maioria dos navegadores (consegui fazer funcionar até no IE7 aqui). Por que não reescrevê-lo em outra tag? Bom, infelizmente não sou o gênio em JS ou jQuery, e fiz algo bem a grosso modo:

 

<!doctype html>
<html lang="pt-br" dir="ltr">
<meta charset="utf-8">
<title>Teste 6/4/2012</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>	
$(function(){
$('[type=number]').each(function(){
	var $this = $(this),
		min = $this.attr('min'),
		max = $this.attr('max'),
		step = parseInt($this.attr('step')),
		value = parseInt($this.val()),
		readonly = $this.attr('readonly'),
		name = $this.attr('name'),
		id = $this.attr('id')
	$this.before('<div class="falseNumber"><input type=text value='+value+' name='+name+' id='+id+'><button class="mais">˄</button><button class="menos">˅</button></div>')
	var newInput = $this.prev().find('input')
	if(readonly){
		newInput.attr('readonly',true)
		newInput.siblings('button').click(function(){
			return false
		})
	} else {
		newInput.keyup(function(){
			$(this).val($(this).val().replace(/[^0-9\.]/g,''))
		})
		newInput.blur(function(){
			var newInputValue = parseInt(newInput.val())
			if(newInputValue < min){
				$(this).val(min)
			}
			if(newInputValue > max){
				$(this).val(max)
			}
		})
		newInput.siblings('button').click(function(event){
			event.preventDefault()
			var newInputValue = parseInt(newInput.val())
			var button = $(this).html()
			if(button == '˄'){
				newInput.each(function(){
					if(newInputValue+step <= max){
						$(this).attr({
							'value':newInputValue+step
						})
					} else {
						return false
					}
				})
			} else {
				newInput.each(function(){
					if(newInputValue-step >= min){
						$(this).attr({
							'value':newInputValue-step
						})
					} else {
						return false
					}
				})
			}
		})
	}
	$this.remove()
})
})
</script>
<style>
.falseNumber {
position: relative;
padding: 0 25px 0 0;
display: inline-block;
*display: inline;
height: 26px;
}
.falseNumber>input {
height: 20px;
padding: 2px;
border: 1px solid #999;
margin: 0;
}
.falseNumber>button {
width: 25px;
height: 50%;
position: absolute;
right: 0;
padding: 0;
border: 1px solid #ccc;
margin: 0;
font: bold 8px/12px Arial, Helvetica, sans-serif;
}
.falseNumber>button.menos {
bottom: 0;
}
</style>

<form action="">
<fieldset>
	<legend>Teste de input number</legend>
	<input type="number" min="10" max="9999" step="9" value="11" readonly name="teste" id="teste2">
	<input type="number" min="50" max="200" step="50" value="25" name="teste" id="teste3">
	<input type="number" min="1" max="9999" step="1" value="11" readonly name="teste" id="teste4">
</fieldset>
</form>

 

Ao pessoal que "fraga" de JS e souber resumir isso daí, é uma boa né? :thumbsup: