Как запретить удалять первый символ сразу из всех input на сайте и разрешить вводить номер телефона?

Question

[Mesuti]

Привет!
Есть input с placeholder="введите номер телефона".
При клике на него, вставляется плюс value="+"

Как запретить удалять плюс вначале input сразу из всех полей ввода телефона на сайте и разрешить вводить номер телефона?
то есть без добавления дополнительных data атрибутов, потому что этих полей на сайте может быть сколько угодно

Песочница https://jsfiddle.net/Mesuti/oq6752rj/

Попробовал такой вариант, но выдает ошибку и не дает ввести номер телефона.

$(document).ready(function() {
        
            $( '.client-phone' ).click( function(){
                $( '.client-phone' ).val( '+' );
            });
        
            $(".client-phone").on("keyup", function() {
                var value = $(this).val();
                $(this).val($(this) + value.substring(1));
            });
        });

Answer 1

[nvdfxx]

$(".client-phone").on("keyup", function() {
    var value = $(this).val();
    $(this).val('+' + value.substr(value.lastIndexOf('+') + 1));
});

Comments

[Mesuti]

Спасибо за ответ!

Answer 2

[Дмитрий]

Если плюс нельзя удалить, тогда и нет смысла добавлять его, можно его просто отображать в начале поля:

HTML:

<label class="plus"></label><input placeholder="Введите телефон" value="734" />

CSS:

input {
   padding-left: 10px;
}

label.plus {
   position: relative;
}

label:after {
   left: 2px;
   top: 1px;
   position: absolute;
   content: "+";
}

Comments

[Mesuti]

спасибо за участие!

Однако, в поле должен быть placeholder Введите номер телефона. И плюс появляться только после клика..
Сейчас попробую просто сделать появление при клике в поле

[Дмитрий]

Mesuti, На модном js как вариант наверное так

$(".client-phone").on("input", function() {
    var value = $(this).val();
    var pos = value.indexOf('+');
    if(pos === 0) return;
    else if(pos < 0) $(this).val('+' + value);
    else $(this).val(value.substr(pos));
 });