Есть вот такой калькулятор с автоматическим выводом стоимости, но у инпута не видно плейсхолдера из-за стоящей в нём еденицы. Нужно убрать эту единицу, чтобы был виден плейсхолдер и чтобы изначально стоимость у калькулятора была нулю. Буду очень всем благодарен
Не ругайте за структуру, пожалуйста((((
(function ($) {
$(function () {
calculate();
jQuery('#calculator input').keyup(function() {
this.value = this.value.replace(/[^0-9\.,]/g, '');
this.value = this.value.replace(/[,]/, '.');
});
jQuery('#calculator input, #calculator select').change(function() {
calculate();
});
jQuery('#calculator input').keyup(function() {
calculate();
});
function calculate() {
$('.calculator').each(function(key, val){
calcInputs = {};
$(this).find('input, select').each(function(key, val){
name = $(this).attr('name');
val = $(this).val();
if (!$.isNumeric(val)) {
switch (name) {
case 'area':
val = 1;
break;
default:
break;
}
$(this).val(val);
}
calcInputs[name] = val;
});
total = 0;
install = calcInputs.area * 100;
total += install;
total += ' рублей';
jQuery(this).find('span.total').html(total);
});
}
});
})(jQuery);
;
.price{
min-height: 400px;
border-radius: 20px;
max-width: 500px;
border: 3px solid #0075FF;
background:#f9f9f9;
}
.title {
text-align: center;
margin-top: 50px;
font-size: 24px;
font-family: "Arial";
font-weight: 700;
}
.span-1 {
font-family: "Arial";
color: #0075FF;
font-weight: 700;
}
.calc_title{
font-size: 28px;
color: #ee1d25;
margin: 0 0 20px;
}
.input-calc {
box-sizing: border-box;
width: 400px;
height: 50px;
border: 3px solid #0075FF;
border-radius: 10px;
margin-top: 40px;
}
.stoimost {
font-family: "Arial";
text-align: center;
font-size: 24px;
font-weight: 700;
margin-top: 40px;
}
.input-div {
text-align:center;
}
.result{
padding: 20px 0 0;
margin: 20px 0;
font-size: 24px;
border-top: 1px solid #e0e0e0;
}
span.total{
margin-top: 20px;
font-family: "Arial";
text-align: center;
font-size: 36px;
color: #0075FF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/mine.css">
<script ENGINE="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js "></script>
</head>
<body>
<section>
<div class="price">
<div class="title">Узнайте минимальную стоимость<br> <span class="span-1">моментально!</span></div>
<div id="calculator" class="calculator">
<div class="input-div">
<input name="area" type="text" value="#" class="input-calc" placeholder="Введите площадь">
</div>
<div class="total stoimost">
Cтоимость:
<br><span class="total">2990 руб.</span>
</div>
</div>
</div>
</section>
<script src="mine.js"></script>
</body>
</html>