Умный input для url

293

23 декабря 2016, 15:07

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

<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 варианта:

Использование масочной библиотеки по типу (https://github.com/RobinHerbots/Inputmask)
Ручная фильтрация через 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.");
        }
    });

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

Answer 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">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Задержка выполнения скрипта на Jquery

Делаю мега-мега менюЗаметил что при переходе з главного пунка меню к последнему дочернему по диагонали блок пропадает

459

CSS

Анимация для каждого элемента next() в JQuery

Я хочу добиться эффекта, что при нажатии на элемент icon-menu, каждый пункт li в отдельности последовательно плавно менял совою прозрачность и выезжал...

293

CSS

Добавляю количество вкладок в табах и пропадает паралакс, почему?

310

c++

ошибка при инициализации с помощью std::tie

Ошибка при инициализации с помощью std::tie

287