Как заменить input на просто текст и наоборот?

259

16 января 2019, 23:40

Есть input, при вводе правильного значения он превращается из поля ввода в то число которое было введено пользователем

$(".inputA").change(function() { 
      if ($(this).val() < a) { 
        $(this).css("border", "5px solid red"); 
      } else if ($(this).val() == a) { 
        $(this).css("border", "5px solid green"); 
        drawArcB(); 
        $(".inputB").css("display", "block"); 
      } 
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="number" class="inputA">

Answer 1

Лучше подписаться на событие blur. Что значит наоборот? У вас уже текст вместо поля.

const a = 546; 
$(".inputA").blur(function() { 
      if ($(this).val() < a) { 
        $(this).css("border", "5px solid red"); 
      } else if ($(this).val() == a) { 
        $('.wrapper').text($(this).val()); 
        //$(this).css("border", "5px solid green"); 
        //drawArcB(); 
        //$(".inputB").css("display", "block"); 
      } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
<input type="number" class="inputA"> 
</div>

Answer 2

Я правильно понял суть задачи?

Если да, то можете использовать этот вариант, но не стоит.. Я очень хочу спать и написал код не особо обдумав.

Это больше "подсказка" для других :D

$('button').on('click',function(){ 
  var elemInput = $('.input'), 
      elemText = $('.text'); 
  if(elemInput.hasClass('hide')) { 
    // Если сейчас показан текст 
    elemInput.removeClass('hide'); // Показываем инпут 
    elemText.addClass('hide'); // Прячем текст 
    $(this).text('Сохранить'); // Меняем название кнопки чтобы пользователям было понятнее 
  } else if(elemText.hasClass('hide')) { 
    // Если сейчас показан инпут 
    var InputVal = elemInput.find('input').val(); // Получаем значения инпута 
    elemText.text(InputVal); // Вставляем значение в текст 
    elemText.removeClass('hide'); // Показываем текст 
    elemInput.addClass('hide'); // Прячем инпут 
    $(this).text('Изменить'); // Меняем название кнопки чтобы пользователям было понятнее 
  } 
});

.hide {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
 
<div class="input hide"> 
  <input type="number" value="0"> 
</div> 
<div class="text">0</div> 
<button>Изменить</button>