Калькулятор не показывает placeholder у инпута

Question

Есть вот такой калькулятор с автоматическим выводом стоимости, но у инпута не видно плейсхолдера из-за стоящей в нём еденицы. Нужно убрать эту единицу, чтобы был виден плейсхолдер и чтобы изначально стоимость у калькулятора была нулю. Буду очень всем благодарен

Не ругайте за структуру, пожалуйста((((

(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>

Answer 1

У тебя изначально указывается, что значение у инпута = 1

val = 1;

Соответственно меняешь значение - меняется дальнейший результат. Присвоить пустоту будет не корректно, лучше так:

val = '';

Answer 2

У вас проблема в том что сразу вызывается функция calculate, которая проверяет, и если в поле не число - поставить 1. Просто убираем вызов calculate и ставим on focus - когда пользователь уже выберет поле. И у поля убираем value - чтоб отображался placeholder поле должно быть пустым.

(function ($) {
  $(function () {
    jQuery('#calculator input').keyup(function() {
      this.value = this.value.replace(/[^0-9\.,]/g, '');
      this.value = this.value.replace(/[,]/, '.');
    });
    
    jQuery('#calculator input, #calculator select').on("input", calculate);
    
    jQuery('#calculator input').on("focus", 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').text(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="number" 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>

Так же имею несколько замечаний:

Чтоб не использовать кучу событий типа keyup, change - есть удобный input.
Вместо того, чтоб передавать function() { calculate(); }, можно сразу передать calculate
Для ввода чисел рекомендуется использовать input type=number

Полезные ссылки:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions

БЛОГ НА HUSL

Калькулятор не показывает placeholder у инпута

Ответы (2 шт):