Изменить span на input и обратно

Question

Есть несколько товаров в таблице с их количеством. Если пользователь хочет изменить количество, нажимает на значение , исчезает и появляется . Как сделать чтобы при исчезновении фокуса от input, input исчезал и появлялся span, но при этом введенное значение сохранялось

function edit_qty(id_num) {
    $("#"+id_num).prop("type", "number").focus().select();
    $("#id_"+id_num).prop("class", "no_display");
}

.no_display{
    display: none;
}

<td class='center pointer h43' onclick="edit_qty('$uniq')">
  <input type='hidden' name='prod_qty_{$uniq}' value='{$uniq_arr[$uniq]}' id='$uniq'>
  <span id='id_{$uniq}'>{$uniq_arr[$uniq]}</span>
</td>

Answer 1

Как сделать чтобы при исчезновении фокуса от input, input исчезал и появлялся span, но при этом введенное значение сохранялось

Предложу такой вариант решения...

$('table td').on('click', test)
$('table input').on('blur', test)
//
function test(e) {
  const o = e.target.closest('td')
  if (!o) return
  const oi = o.querySelector('input')
  const os = o.querySelector('span')
  if (oi.type === 'hidden') {
    oi.type = 'text'
    oi.value = os.textContent
    oi.select()
    return
  }
  os.textContent = oi.value
  oi.type = 'hidden'
}

td {
  min-width: 50px;
  height: 20px;
}
td [type='text'] + span {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
  <tr>
    <td>
      <input type='hidden' />
      <span>1</span>
    </td>
    <td>
      <input type='hidden' />
      <span>2</span>
    </td>
    <td>
      <input type='hidden' />
      <span>3</span>
    </td>
  </tr>
  <tr>
    <td>
      <input type='hidden' />
      <span></span>
    </td>
    <td>
      <input type='hidden' />
      <span></span>
    </td>
    <td>
      <input type='hidden' />
      <span></span>
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Изменить span на input и обратно

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