digit decimal picker

244

20 февраля 2018, 04:50

Пытаюсь найти аналог datepicker(bootstrap), только для чисел. Чтобы при нажатии на инпут появлялось окно(типа калькулятора), где можно было бы ввести число,в том числе и вещественное. Может кто видел что-то подобное(гугление пока не дало результат)?

Upd: нашел такой решение numpad

Answer 1

Первый попавшийся пример с поиска:

var resultados = new Array(); 
 
function calcula() { 
  enviaParaEquacao(''); 
  var val = $("#pbtCalcForm").html().replace(/×/g, "*").replace(/÷/g, "/"); 
  var resultado = eval(val); 
  $("#pbtCalcInput").val(resultado); 
  resultados.push(resultado); 
  esvazia(); 
} 
 
function cancela() { 
  $("#pbtCalcInput").val(''); 
} 
 
function esvazia() { 
  $("#pbtCalcForm").html(''); 
} 
 
function cancelaEsvazia() { 
  cancela(); 
  esvazia(); 
} 
 
function corrigeString(string) { 
  var strArr = string.split(''); 
  var string2 = ''; 
  var ultimoIndice = strArr.length - 1; 
  var apagaPrimeira = ((strArr[0] === '0') && ((strArr[1] !== '.') && (strArr[1] !== undefined))) ? true : false; 
  var contaPonto = 0; 
  $.each(strArr, function(i, value) { 
    if (value === '.') { 
      contaPonto++; 
    } 
    if (((apagaPrimeira === false) || (i !== 0)) && 
      ((value !== '.') || (contaPonto < 2))) { 
      string2 += value; 
    } 
  }); 
  if (strArr[0] === '.') { 
    string2 = '0' + string2; 
  } 
  return string2; 
} 
 
function corrigeString2(string) { 
  string = string.replace("×0", "").replace("÷0", ""); 
  var stringArr = string.split('.'); 
  if (stringArr[1] !== undefined) { 
    var stringReversa = stringArr[1].split("").reverse().join(""); 
    var stringArr2 = stringReversa.split(''); 
    var string2 = ''; 
    $.each(stringArr2, function(i, value) { 
      if (value !== '0') { 
        string2 = string2 + value; 
      } 
    }); 
    if (string2.length > 1) { 
      var string2 = string2.split("").reverse().join(""); 
      return stringArr[0] + '.' + string2; 
    } else { 
      return stringArr[0]; 
    } 
  } else { 
    return string; 
  } 
} 
 
function insereCaracter(caracter) { 
  var value = corrigeString($("#pbtCalcInput").val() + caracter); 
  $("#pbtCalcInput").val(value); 
} 
 
function enviaParaEquacao(caracter) { 
  var equa = $("#pbtCalcForm").html(); 
  var input = $("#pbtCalcInput").val(); 
  if (input !== '') { 
    $("#pbtCalcForm").html(corrigeString2(equa + input + caracter)); 
    $("#pbtCalcInput").val(0); 
  } 
} 
 
function backspace() { 
  var sub = $("#pbtCalcInput").val().substring(0, $("#pbtCalcInput").val().length - 1); 
  $("#pbtCalcInput").val(sub); 
} 
 
function mostraMemoria() { 
  var resultados2 = resultados.reverse(); 
  $.each(resultados2, function(index, data) { 
    if (data !== undefined) { 
      var result = "&nbsp;<span class='itemMemoria'>" + data + "</span>,"; 
      $("#pbtMemoria").append(result); 
    } 
  }); 
  $("#pbtPainel").slideUp("fast"); 
  $("#pbtMemoria").slideDown("fast"); 
  //alert(resultados[2]); 
} 
 
function fechaMemoria() { 
  $("#pbtPainel").slideDown("fast"); 
  $("#pbtMemoria").slideUp("fast"); 
} 
 
function enviaMemoria(valor) { 
  $("#pbtCalcInput").val(valor); 
} 
 
function enviaParaInput(input) { 
  $("#" + input).val($("#pbtCalcInput").val()).focus(); 
  fechaCalculadora(); 
} 
 
function fechaCalculadora() { 
  $("#pbtCalculadora, #pbtCalculadoraBackground").fadeOut("fast", function() { 
    $(this).remove(); 
  }); 
} 
 
function corrigeTitle(title) { 
  if (title.length >= 20) { 
    return title.substring(0, 17) + '...'; 
  } else { 
    return title; 
  } 
} 
 
function montaCalculadora(id) { 
  var titulo = corrigeTitle($("#" + id).attr('title')); 
  var tituloTitle = $("#" + id).attr('title'); //DOH! 
  var value = $("#" + id).val(); 
  var html = '<div id="pbtCalculadoraBackground"></div><div id="pbtCalculadora"> <div id="pbtCalcCabecalho"> <h1 title="' + tituloTitle + '">' + titulo + '<span class="cFechaBot" id="pbtFechaCalc"></span></h1><div id="pbtCalcForm"></div><input type="text" id="pbtCalcInput" value="' + value + '" /></div> <div id="pbtMemoria"><h1>Memória<span class="cFechaBot" id="pbtFechaMemoria"></span></h1></div><div id="pbtPainel"><div class="linha"><div class="pbtBotao l1 acao" data-acao="memoria">M</div><div class="pbtBotao l1 acao" data-acao="cancelaEsvazia">CE</div><div class="pbtBotao l1 acao" data-acao="cancela">C</div><div class="pbtBotao l1 acao" data-acao="backspace">&larr;</div></div><div class="linha"><div class="pbtBotao l1 numero">7</div><div class="pbtBotao l1 numero">8</div><div class="pbtBotao l1 numero">9</div><div class="pbtBotao l1 operador">&#247;</div></div><div class="linha"><div class="pbtBotao l1 numero">4</div><div class="pbtBotao l1 numero">5</div><div class="pbtBotao l1 numero">6</div><div class="pbtBotao l1 operador">&#215;</div></div><div class="linha"><div class="pbtBotao l1 numero">1</div><div class="pbtBotao l1 numero">2</div><div class="pbtBotao l1 numero">3</div><div class="pbtBotao l1 operador">-</div></div><div class="linha"> <div class="pbtBotao l1 numero">0</div><div class="pbtBotao l1 numero">.</div><div class="pbtBotao l1 acao" data-acao="calcula">=</div><div class="pbtBotao l1 operador">+</div></div><div class="linha"><div class="pbtBotao l4 acao" data-acao="envia" data-input="' + id + '">ENVIAR<div></div></div></div>'; 
  $('body').append(html); 
 
  $('#pbtCalcInput').focus().setCursorPosition(2); 
 
 
} 
 
 
 
 
$("body").delegate(".numero", "click", function() { 
  insereCaracter($(this).html()); 
  $("#pbtCalcInput").focus(); 
}); 
$("body").delegate(".operador", "click", function() { 
  enviaParaEquacao($(this).html()); 
  $("#pbtCalcInput").focus(); 
}); 
$("body").delegate(".acao", "click", function() { 
  if ($(this).data("acao") !== undefined) { 
    switch ($(this).data("acao")) { 
      case 'calcula': 
        calcula(); 
        break; 
      case 'cancela': 
        cancela(); 
        break; 
      case 'cancelaEsvazia': 
        cancelaEsvazia(); 
        break; 
      case 'backspace': 
        backspace(); 
        break; 
      case 'memoria': 
        mostraMemoria(); 
        break; 
      case 'envia': 
        enviaParaInput($(this).data('input')); 
    } 
  } 
  $("#pbtCalcInput").focus(); 
}); 
$("body").delegate("#pbtCalcInput", "keypress", function(e) { // alert(e.which) 
  if (!((e.which >= 48) && (e.which <= 57) || (e.which === 46))) { 
    e.preventDefault(); 
  } 
  if ((e.which == 13) || (e.which == 61)) { 
    e.preventDefault(); 
    calcula(); 
    $("#pbtCalcInput").focus(); 
  } 
  if (e.which == 43) { 
    e.preventDefault(); 
    enviaParaEquacao('+'); 
    $("#pbtCalcInput").focus(); 
  } 
  if (e.which == 45) { 
    e.preventDefault(); 
    enviaParaEquacao('-'); 
    $("#pbtCalcInput").focus(); 
  } 
  if (e.which == 47) { 
    e.preventDefault(); 
    enviaParaEquacao('÷'); 
    $("#pbtCalcInput").focus(); 
  } 
  if (e.which == 42) { 
    e.preventDefault(); 
    enviaParaEquacao('×'); 
    $("#pbtCalcInput").focus(); 
  } 
 
}); 
$("body").delegate("#pbtCalcInput", "keyup", function(e) { 
  $("#pbtCalcInput").val(corrigeString($("#pbtCalcInput").val())); 
}); 
$("body").delegate("#pbtFechaMemoria", "click", function() { 
  fechaMemoria(); 
}); 
$("body").delegate(".itemMemoria", "click", function() { 
  enviaMemoria($(this).html()); 
  fechaMemoria(); 
}); 
$("body").delegate("#pbtFechaCalc, #pbtCalculadoraBackground", "click", function() { 
  fechaCalculadora(); 
}); 
$(".pbtCalc").each(function() { 
  var id = $(this).attr('id'); 
  var button = '<div class="pbtCalcBot" data-id="' + id + '"><span>+</span><span>-</span><br><span>×</span><span>=</span></div>'; 
  $(this).wrap('<div id="pbtC' + id + '" class="pbtContainer"></div>'); 
  $("#pbtC" + id).append(button); 
}); 
$("body").delegate(".pbtCalcBot", "click", function() { 
  montaCalculadora($(this).data("id")); 
}); 
 
 
function setSelectionRange(input, selectionStart, selectionEnd) { 
  if (input.setSelectionRange) { 
    input.focus(); 
    input.setSelectionRange(selectionStart, selectionEnd); 
  } else if (input.createTextRange) { 
    var range = input.createTextRange(); 
    range.collapse(true); 
    range.moveEnd('character', selectionEnd); 
    range.moveStart('character', selectionStart); 
    range.select(); 
  } 
} 
 
function setCaretToPos(input, pos) { 
  setSelectionRange(input, pos, pos); 
}

#pbtCalculadoraBackground { 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
  background-color: #000; 
  opacity: 0.6; 
} 
 
#pbtCalculadora { 
  display: block; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  width: 250px; 
  padding: 0; 
  font-family: Verdana; 
  text-align: center; 
  background-color: #f3f3f3; 
  transform: translate(-50%, -50%); 
  z-index: 10; 
} 
 
#pbtCalcCabecalho { 
  display: block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  width: 100%; 
  margin: 0; 
} 
 
#pbtCalcCabecalho h1 { 
  font-size: 14px; 
  font-weight: normal; 
  margin: 0 2px; 
  padding: 5px; 
  color: #000 
} 
 
#pbtCalcForm { 
  display: block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  width: 100%; 
  height: 20px; 
  padding: 5px 10px; 
  margin: 0 auto; 
  text-align: right; 
  font-size: 10px; 
  background-color: #fff; 
} 
 
#pbtCalcInput { 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  width: 100%; 
  padding: 5px 10px; 
  margin: 0; 
  border: 0 none transparent; 
  font-size: 16px; 
  text-align: right; 
} 
 
#pbtCalcInput:focus { 
  outline: 0; 
} 
 
#pbtMemoria { 
  display: none; 
  width: 100%; 
  height: 200px; 
  background-color: #fff; 
  border-width: 1px; 
  border-style: none; 
  border-color: #0b8820; 
  overflow: auto; 
} 
 
.itemMemoria { 
  cursor: pointer; 
} 
 
.itemMemoria:hover { 
  color: #0b8820; 
} 
 
#pbtMemoria h1 { 
  font-size: 16px; 
  font-weight: normal; 
  padding: 4px; 
} 
 
.linha { 
  display: block; 
} 
 
.pbtBotao { 
  display: inline-block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  height: 40px; 
  min-height: 40px; 
  line-height: 30px; 
  padding: 5px; 
  margin: 0; 
  vertical-align: top; 
  border: 1px none #0b8820; 
  cursor: pointer; 
} 
 
.pbtBotao:hover { 
  background-color: #97fb99; 
} 
 
.l1 { 
  width: 25%; 
} 
 
.l4 { 
  width: 100%; 
} 
 
.numero { 
  background-color: #fff; 
} 
 
.operador { 
  background-color: rgb(226, 249, 224); 
} 
 
.acao { 
  background-color: rgb(226, 249, 224); 
} 
 
.cFechaBot { 
  float: right; 
  width: 15px; 
  height: 15px; 
  line-height: 13px; 
  margin: 0; 
  padding: 0; 
  font-size: 9px; 
  text-align: center; 
  text-transform: lowercase; 
  background-color: #700000; 
  border-radius: 20px; 
  color: #fff; 
  cursor: pointer; 
} 
 
.cFechaBot:hover { 
  background-color: #ff0000; 
} 
 
.cFechaBot::after { 
  content: 'x'; 
} 
 
.pbtContainer { 
  display: inline-block; 
  border-style: none; 
} 
 
.pbtCalcBot { 
  display: inline-block; 
  height: 32px; 
  line-height: 12px; 
  width: 32px; 
  padding: 0px; 
  margin: 5px; 
  vertical-align: middle; 
  background-color: #5DC96F; 
  border: 1px solid #0b8820; 
  border-radius: 3px; 
  cursor: pointer; 
} 
 
.pbtCalcBot span { 
  display: inline-block; 
  width: 12px; 
  height: 12px; 
  line-height: 12px; 
  font-size: 12px; 
  font-weight: bold; 
  vertical-align: top; 
  margin: 1px; 
  padding: 0; 
  text-align: center; 
  border: 1px solid #0b8820; 
  border-radius: 3px; 
} 
 
.pbtCalcBot:hover { 
  background-color: #97fb99; 
} 
 
 
/* a partir daqui o css serve apenas para o exemplo */ 
 
body { 
  font-family: Verdana; 
  background-color: #f5f5f5; 
} 
 
h1 { 
  display: block; 
  font-size: 22px; 
  padding: 5px; 
  font-weight: normal; 
  text-align: center; 
  border-width; 
  0 0 1px 0; 
  border-style: none; 
  border-color: #888; 
} 
 
label { 
  display: block; 
} 
 
.pbtInput { 
  width: 200px; 
  padding: 6px; 
  margin: 5px 0 20px 0; 
  font-size: 16px; 
  border: 1px solid #0b8820; 
} 
 
.pbtInput:focus { 
  background-color: #dbf9e2; 
  outline: none; 
} 
 
#container { 
  display: block; 
  width: 300px; 
  margin: 20px auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Input Calculator</title> 
 
 
 
  <link rel="stylesheet" href="css/style.css"> 
 
 
</head> 
 
<body> 
  <h1>Input Calculadora</h1> 
  <div id="container"> 
    <label>Valor Juros Líquido</label> 
    <input type="text" id="exemplo1" class="pbtCalc pbtInput" title="Valor Juros Líquido " value="99" /> 
    <label>Valor Total</label> 
    <input type="text" id="exemplo2" class="pbtCalc pbtInput" title="Valor Total" value="5" /> 
  </div> 
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
  <script src="js/index.js"></script> 
 
</body> 
 
</html>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Загрузка данных с парсера на питоне в БД mySQL

Я сделал парсер страницыУ меня есть данные, которые я смог выгрузить

252

MySQL

Объединить в одну строку mysql

прикрепил фото с задачейпомогите написать запрос что бы можно было динамически создать столбец и вывести всю информация в одну строку

207

MySQL

Полный вывод запроса mysql

Есть запрос:

194

MySQL

ASP.NET Core 2.0 Identity Framework + MySQL. Как использовать?

Подскажите, есть ли какие простые манипуляции по переводу скаффолдингового приложения (Web application) с индивидуальной авторизацией на MySQL базу...

244