Как скрыть определенные символы в списке ввода HTML? - PullRequest
Новая
       12

Как скрыть определенные символы в списке ввода HTML?

0 голосов
/ 19 января 2019

У меня есть список ввода html со связанным списком данных, который определяется следующим образом: 

<input list="mylist" id="my-input" name="friend-name" 
   placeholder="Begin typing friend's name here..." 
   required class="form-control">

Сам список (и связанный список данных) работает нормально. Тем не менее, каждая из моих записей имеет вид: "String [numeric_id]"

  • Что мне интересно, так это то, что я могу как-то спрятать [numeric_id] часть перед отправкой формы.
  • Я посмотрел на атрибут pattern, но это, кажется, ограничивает фактические данные допускаются на входе, а это не то, что я хочу - я просто хочу, чтобы часть в квадратных скобках [] была скрыта, но все же отправлено в форму.
  • Было бы также хорошо переместить его на другой вход type=hidden. Есть ли способ сделать это?

@ isherwood, вот мой тег формы: 

<form action="/chat_forwarding/modal_edit_msg.php" id="fwd-form" method="POST" class="form-inline" style="display: block;">

Ответы [ 2 ]

0 голосов
/ 19 января 2019

Я должен был упомянуть, что мой ввод также использует Awesomplete (и jQuery). По этой причине связывание обычных событий, таких как keyup, не работает (событие будет срабатывать всякий раз, когда пользователь вводит ключ). Мне удалось достичь желаемой функциональности с помощью события awesomplete-selectcomplete следующим образом (это добавит скрытый элемент ввода со значением id из строки вида «String [id]»): 

  $("#my-input").on('awesomplete-selectcomplete',function(){
        var fullStr = this.value;
        //alert(fullStr);
        var regex = /\[[0-9]+\]/g;
        var match = regex.exec(fullStr);
        //alert(match[0]);
        if (match != null) // match found for [id]
        {
                var fullName = fullStr.substr(0,fullStr.lastIndexOf("[")-1);
                var x = match[0];
                var id = x.substr(1, x.lastIndexOf("]")-1);
                //alert(id);
                $('#fwd-form').prepend('<input type="hidden" name="h_uid" value="' + id + '">');
                $('#my-input').val(fullName);


        }
    });
0 голосов
/ 19 января 2019

Если вы не используете какой-либо фреймворк, поддерживающий связывание, вам следует прослушивать входные события и обновлять скрытый ввод, основываясь на этом.

Это функция, которая может дать вам идею: 

let realInput = document.getElementById('real-input');
let userInput = document.getElementById('user-input');
userInput.addEventListener('input', function(value) {
  const inputValue = value.target.value;
  realInput.value = inputValue; // update the hidden input
  const userInputResult = inputValue.match(/\[[^\[]*\]/); // the regex for [numberic_id]
  if (userInputResult) {
    userInput.value = inputValue.substring(0, [userInputResult.index - 1]); // -1 is to remove the space between the 'string' and the '[numeric_id]'
  }
});
...