Как сделать input не редактируемым?

Question

[Антон Вебсайтовский]

Поставил скрипт валидации, поле где вводим телефон работает так: вводим номер и когда вводим полный номер поле фиксируется и больше нельзя писать, но есть проблема, телефон с этого поля перестал приходить на емаил.
Я закоментил кусок кода, который фиксировал номер, то есть делал инпут не редактируемым, и телефон стал приходить. Как можно то же самое сделать, но чтобы номер приходил?

Вот этот кусок кода отключал поле, когда мы его заполняли:

document.getElementById("f_phone").disabled = true;

На что можно заменить? Чтобы в поле нельзя было писать.

Comments

[Dymok]

зачем его вообще блокировать?
а если пользователь ошибся или решил ввести другой телефон, ему нужно обновлять страницу?

[Антон Вебсайтовский]

Dymok, такая задача.

Answer 1

[Andrew]

document.querySelector('input').setAttribute('readonly','readonly');

https://codepen.io/kickerock/pen/RwwygGG

Comments

[Антон Вебсайтовский]

О только читал об readonly )))

[Антон Вебсайтовский]

Маленький вопрос, так удалит класс? $('#f_phone').Remove('done');
вот это добавить, $('#f_phone').addClass('done');

а удалить как?

[Andrew]

Антон Вебсайтовский, .removeClass('customClass');

[Антон Вебсайтовский]

Andrew, спасибо

[Антон Вебсайтовский]

поставил, document.querySelector('input').setAttribute('readonly','readonly');
но заметил, что все равно писать можно.

[Andrew]

Антон Вебсайтовский, вам нужно выбрать ваш input, по классу или id.
я вам для примера написал.

[Антон Вебсайтовский]

Типа так
document.getElementById("f_phone").querySelector('input').setAttribute('readonly','readonly');

[Andrew]

Антон Вебсайтовский,

document.getElementById("f_phone").setAttribute('readonly','readonly');

[Антон Вебсайтовский]

Andrew, а как еще туда добавить чтобы .addClass('nono') применялся. это я хочу ховер убрать. а то в поле писать нельзя, но когда наводишь ховер срабатывает и курсор, в стиле nono, я ховер убрал и курсор по дефолту сделал.

[Andrew]

Антон Вебсайтовский, вам синтаксис какой нужен jQuery или всё-таки VJS?

[Антон Вебсайтовский]

Что я еще заметил с этой функцией, у меня там так стоит, при вводе номера, появляется кнопка подтвердить, и после подтверждения номера идет фиксация номера чтобы нельзя было менять его, ну в друг пользователь нечаянно нажмет.

Так вот, document.getElementById("f_phone").setAttribute('readonly','readonly');
Работает, но есть но, если нажать типа на поле где нельзя уже вводить и нажать цифру то кнопка появляется, то есть скрипт определяет что мы там чет поменяли, но визуально этого не видно.

[Антон Вебсайтовский]

Andrew, вот этого я не знаю.

кусок кода

$('#f_phone_code').keyup(function(){
        if ($(this).val().search('_') == -1) {
            if ($(this).val() == code) {
                $('#f_phone_code').hide();
                $('.code-error').hide();
                $('#phone_done').hide();
                $('#f_phone').addClass('done');
              document.getElementById("f_phone").setAttribute('readonly','readonly');
                $('.code-done').show();
                $('.code-done').html('Номер подтвержден');
            } else {
                $('.code-error').show();
                $('.code-error').html('Код подтверждения неверный!');
            }
        } else {
            $('.code-error').hide();
        }
    });

[Andrew]

Антон Вебсайтовский, вы какую-то странную хрень придумали, раз там так всё запутано, просто при заполнении делайте кнопку disabled и пишите в input[type=hidden] значение этого поля и оно будет отправляться и не надо играться с этим всем.

[Антон Вебсайтовский]

Andrew, то есть это убрать, document.getElementById("f_phone").setAttribute('readonly','readonly');

а как тогда сделать чтобы input[type=hidden] срабатывало на поле.
так? $('#f_phone').style('input[type=hidden]');

[Andrew]

Антон Вебсайтовский,
там(можно перед), где вы его делаете disabled

$('input[type="hidden"]').val($('#f_phone').val());

input[type=hidden] тоже дайте айди и имя, по ним лучше записать в него значение.
И по нему, на бэке, его читать вместо input.disabled'a

[Антон Вебсайтовский]

Andrew, не совсем понял.
так пробовал, ничего не срабатывает ($('input[type="hidden"]').val($('#f_phone').val());)
я так понимаю надо как-то добавить туда document.getElementById("f_phone")

это и есть ид #f_phone в импуте

[Антон Вебсайтовский]

И зачем мне вообще форму скрывать, type="hidden" это же скрывает импут.

[Антон Вебсайтовский]

Я оставил так.

$('#f_phone').addClass('nono');
document.getElementById("f_phone").setAttribute('readonly','readonly');

nono стили которые убирают ховер и делают курсор по дефолту при наведении на импут.

[Andrew]

Антон Вебсайтовский,
у вас форма должна быть типа такой:

<form>
<input type="hidden" id="inp_hidden" name="inp_hidden" />
<input type="text" id="f_phone" />
<button type="submit">Submit</button>
</form>

При заполнении символами у вас меняется аттрибут #f_phone

$('#f_phone').input(function(){
if($(this).val().length>12){
$('#inp_hidden').val($(this).val());
$(this).prop('disabled',true);
}
})

Вот как оно должно работать, я думаю.
И на сервер у вас отправляется значение #inp_hidden

[Trash]

Andrew, это всё похоже на "сделайте за меня работу, я не умею искать в гугле"

[Andrew]

Сергей Валитов, maybe so maybe so

Answer 2

[Trash]

Антон Вебсайтовский, в нужный момент добавьте к input атрибут readonly, это решит вашу проблему