Nano Hash - криптовалюты, майнинг, программирование

Форматирование входного значения с использованием javascript, когда пользователь вводит значение в поле ввода

У меня есть поле ввода длиной 14, в которое пользователь вводит значение. Когда пользователь вводит его, я хотел бы, чтобы пробел автоматически добавлялся после первых 2 символов, а затем после следующих 3 символов, а затем после следующих 3 символов. поэтому, если пользователь хочет ввести 12345678901, он должен быть отформатирован как 12 345 678 901.

Также, когда пользователь использует клавишу Backspace для очистки символов, пробел должен автоматически удаляться. Таким образом, в приведенном выше случае, когда курсор достигает 9 и пользователь нажимает клавишу Backspace, курсор должен переместиться на две позиции влево, очищая 9 и пробел перед ним.

Я попытался выполнить форматирование кредитной карты здесь Форматировать номер кредитной карты, но не мог понять, как это Готово. Код по ссылке выше

formatInput(event: any) {
    var v = event.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
    var matches = v.match(/\d{4,16}/g);
    var match = matches && matches[0] || ''
    var parts = []

    for (let i=0, len=match.length; i<len; i+=4) {
       parts.push(match.substring(i, i+4))
    }

    if (parts.length) {
      (<HTMLInputElement>document.getElementById("txtInput")).value = 
        parts.join(' ')
    } else {
        (<HTMLInputElement>document.getElementById("txtInput")).value 
          = event.value;
    }
}

Приведенный выше код генерирует пробелы после каждых 4 цифр. Мое требование состоит в том, чтобы принимать любые символы и генерировать пробелы после первых 2 символов, затем после следующих 3 символов, а затем после следующих 3 символов. Пожалуйста, помогите мне с этим.


  • Вы должны поделиться своим текущим кодом, чтобы увидеть, где вы ошибаетесь. 08.03.2021
  • В этих решениях слишком много нюансов, и все они зависят от вашего текущего кода. Итак, пожалуйста, начните с этого, сделайте что-нибудь, а затем, пожалуйста, вернитесь с более конкретным вопросом. 08.03.2021
  • Я добавил код сейчас в вопрос 08.03.2021
  • Может var matches = v.split(/(?<=^\d{2})|\B(?=(?<=\d{4})(?:\d{3})+$)/)? 08.03.2021

Ответы:


1

это рабочий пример, который решает вашу проблему.

function format(str) {
 if (str.length < 2) return str
  else {
    let [fl,sl,...lstr] = str
    lstr =lstr.reduce((acc, el, i) => (i % 3 ? acc[acc.length - 1]+=el : acc.push(el), acc),[])
  return `${fl}${sl} ${lstr.join(' ')}`.trim()
  }
}



const [input,result]= document.querySelectorAll('#input,#result')
input.oninput =()=>{
    const i = input.value.replace(/\s/g, '');
    input.value= format(i)
  }
<input type=text id=input />
<p id="result"></p>

08.03.2021
  • Абдель: Ваше решение решило проблему. Большое спасибо :) 09.03.2021
  • Есть одна проблема, которую я заметил. Если значение равно 12 345 678 901, и если я наведу курсор сразу после любого пробела, т.е. перед 3, или 6, или 9, и нажму Backspace, курсор переместится в конец значения, т.е. после последнего 1. Например, если я сфокусирую установите курсор непосредственно перед цифрой 3 и нажмите клавишу Backspace, курсор переместится в конец значения без фактического удаления пробела. Как решить эту проблему? 09.03.2021
  • такое поведение ожидается, потому что удаление пробела повторно запускает функцию, которая переформатирует ввод, чтобы пробел снова занял свое место 10.03.2021
  • Хорошо. Спасибо. 12.03.2021
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..