Как при помощи js или jquery изменить тип инпута, с text на number?

Question

Не могу напрямую изменить тип инпута, хочу реализовать через dom.

Пример инпута

<input type="text" id="test">

Answer 1

let input = document.getElementById("test"); // находите эл-нт по id
input.type = "number"; // меняете тип

Answer 2

Вариант на jQuery

$('input').attr('type', 'number'); // Изменим элементу(элементам) `input` значение атрибута `type` на `number`

Пример:

$('input[type="button"]').on('click',function(){ // При нажатии на кнопку "change type"
  let cur_type = $('#change').attr('type'); // получаем текущее значение атрибута `type` инпута #change
  $('#change') // Возмём наш инпут `text`
    .attr('type', cur_type==='text'?'number':'text'); // Если его `type` равен `text`, то выдадим ему `number`, если не равен, то `number`
});

input[type="text"] {
  color: red;
}

input[type="number"] {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="change" type="text" value="10">
<input type="button" value="change type">

БЛОГ НА HUSL

Как при помощи js или jquery изменить тип инпута, с text на number?

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