0

Имеется поле:

<input id="box-1-form-input" type="text" name="box-1-form-input" placeholder="http://www." value="http://www." class="form-control">

Нужно сделать, что бы оно всегда по умолчанию содержало "http://www.". Для себя определил 2 варианта:

  1. Использование масочной библиотеки по типу (https://github.com/RobinHerbots/Inputmask)

  2. Ручная фильтрация через regexp

В первом варианте сталкиваюсь с проблемой, так как маске надо указывать количество символов и в итоге в поле ввода получается "http://www.___________________".

Во втором варианте не смог определится как работать с входными данными, не затрагивая собственную маску (убирать дублирующиеся "http" и "www"). Для примера набросал такой код:

$("#box-1-form-input").on('change keyup input', function() {
        var input = $(this);
        if(~input.val().indexOf("http://www.")) {
            // regexp
        }
        else {
            input.val("http://www.");
        }
    });

Что посоветуете?

6
  • что значит содержало? Пользователь всегда видел или при отправки добавлялось? Если первое, то это полный абсурд.
    – user220409
    21 дек 2016 в 17:31
  • @OlmerDale увы первый вариант 21 дек 2016 в 18:01
  • поверьте, это очень будет неудобно и не красиво! Если есть возможность, то откажитесь от этого. Это не сложно сделать, это просто ужасно.
    – user220409
    21 дек 2016 в 19:38
  • А Вас не смущает, что бывают сайты, у которых в адресе нет префикса www? И если его туда добавить, сайт не откроется? А еще бывают сайты https://, и их с каждым днем становится все больше...
    – Yaant
    21 дек 2016 в 19:40
  • 1
    Ну вы же задали значение поля по умолчанию. Оно высветилось на экране. Пользователь перебил его как ему надо. Что ещё нужно? На фига его проверять каждый раз, если оно может быть совершенно другим? Если допустим кто-то вводит https://ru.stackoverflow.com Вы будите ему козлить, подменяя ввод на http://www.ru.stackoverflow.com?
    – Sergey
    22 дек 2016 в 8:54

1 ответ 1

-1

Ну если я правильно понял, то можно вот так сделать -

class Input {
  constructor( input, prefix = '' ){
    this.prefix = prefix;
    this.prefixLength = prefix.length;
    
    this.input = input;
    this.input.value = this.prefix;
    this.inputHandler = this.input_inputHandler.bind(this);
    this.input.addEventListener('input', this.inputHandler);
  }
  
  input_inputHandler( { target } ){
    let { value } = target;
    
    if( value.length < this.prefixLength ){
      target.value = this.prefix;
    }
  }
}

let input = new Input(
  document.body.querySelector('input'),
  'https://www.'
);
<input type="text">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.