Как сделать строку как слово в текстовом поле ввода HTML

Я использую систему веб-чата. У меня есть текстовое поле input и список имен, которые позволяют пользователю выбирать и вводить их в текстовое поле. Вот нулевой CSS jsFiddle, который позволяет пользователю щелкнуть имя и ввести его в текстовое поле.

Джсфиддл

$(document).on('click','.tag-panel-contact-name', function(){
    let name = $(this).attr('value');
    $('#textbox').val(name);
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class = "wchat-tag-container" style = "display: block;">
  <div class = "wchat-tag-panel">
    <!-- Contact List for tag -->
    <div class = "wchat-tag-panel-contact" data-member-id = "123" title = "123">
      <span class = "tag-panel-contact-name" value = "Jason">Jason</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "124" title = "124">
      <span class = "tag-panel-contact-name" value = "bot2">bot2</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "127" title = "127">
      <span class = "tag-panel-contact-name" value = "Kopi">Kopi</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "555" title = "555">
      <span class = "tag-panel-contact-name" value = "Host here">Host here</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "60105653762" title = "60105653762">
      <span class = "tag-panel-contact-name" value = "Kopi Bryant">Kopi Bryant</span>
    </div>
  
  </div>
</div>

<input type = "text" id = "textbox">

Моя текущая проблема заключается в том, что я хочу сделать имя текстом, поэтому, когда пользователь намеревается удалить/удалить имя, я хочу, чтобы он сразу удалил все имя, а не символ за символом.

И еще одна проблема, для реальной ситуации разрешено выбирать несколько имен и вводить их в текстовое поле. Итак, я сохраняю эти имена в массиве формата JSON, и как я могу определить, когда пользователь удаляет имя тега? Так что я не храню неправильные данные в массиве.

ваша скрипта js не соответствует описанию вашей проблемы. также опубликуйте его как фрагмент

— 26.12.2020 18:33

Прошу прощения, правку сделал. Я хочу упростить свой вопрос.

— 26.12.2020 18:49

используйте комбинацию div и непрозрачного текстового поля и обработайте backspace при нажатии клавиши ввода, чтобы удалить выбранное имя, если текстовое поле пусто.

— 26.12.2020 18:55

javascript html jquery

26.12.2020 18:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

почему бы просто не использовать поле выбора?

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class = "wchat-tag-container" style = "display: block;">
  <div class = "wchat-tag-panel">
  
  
  <select name = "name" id = "name" >
  <option value = ""></option>
  <option value = "Jason">Jason</option>
  <option value = "bot2">bot2</option>
  <option value = "kobi">kobi</option>
  <option value = "Host here">Host here</option>
  <option value = "Kobi Bryant">Kobi Bryant</option>
</select>

хотя если вы действительно хотите сделать это по-другому:

var input = document.getElementById('textbox')
input.addEventListener('keydown', function(event) { 

if (event.keyCode == 8){
document.getElementById('textbox').value = ''
}

})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class = "wchat-tag-container" style = "display: block;">
  <div class = "wchat-tag-panel">
    <!-- Contact List for tag -->
    <div class = "wchat-tag-panel-contact" data-member-id = "123" title = "123">
      <span class = "tag-panel-contact-name" value = "Jason">Jason</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "124" title = "124">
      <span class = "tag-panel-contact-name" value = "bot2">bot2</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "127" title = "127">
      <span class = "tag-panel-contact-name" value = "Kopi">Kopi</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "555" title = "555">
      <span class = "tag-panel-contact-name" value = "Host here">Host here</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "60105653762" title = "60105653762">
      <span class = "tag-panel-contact-name" value = "Kopi Bryant">Kopi Bryant</span>
    </div>
  
  </div>
</div>

<input type = "text" id = "textbox" >

26.12.2020 19:05

Ответ принят как подходящий

Вот пример кода, который я создал из вашего кода, который вы можете использовать. Я предлагаю соединить имя с @, например, @Kopi, чтобы вы могли идентифицировать пользователя. Проверьте код, внесли некоторые изменения в существующую структуру. Не уверен, что это работает с вашим вариантом использования. Может показать вам направление.

Теперь для вашего второго вопроса см. строку в коде console.info('слово перед курсором: ' + wbc);, которая покажет вам слово, которое удаляется, вы можете использовать это для обновления вашего массива

$(document).on('click','.tag-panel-contact-name', function(){
let name = $(this).attr('valuetag');
  var existingval = $('#textbox').val();
  if ( existingval )
 $('#textbox').val(existingval+' @'+name);
  else
   $('#textbox').val('@'+name);
});

$(document).on('keydown','#textbox', function(e){
  var code = e.keyCode || e.which;
if (code == 8 || code == 46) {
// backspace or delete key
// backspace is 8, delete is 

//console.info(getPos(e.target));
        
  let endingIndex = getPos(e.target);
  let startingIndex = endingIndex && endingIndex - 1;
  let value = e.target.isContentEditable ? e.target.innerHTML : e.target.value;
  let regex = /[ ]/;

  while (startingIndex) {
if (regex.test(value[startingIndex])) {
  ++startingIndex;
  break;
}
--startingIndex;
  }
  var wbc = value.substring(startingIndex, endingIndex);
  //console.info('word before cursor: ' + wbc);
if ( wbc.indexOf("@") == 0 ) {
e.target.value = value.slice(0, startingIndex) + value.slice(endingIndex)
e.preventDefault();
  }
  }
   
});


function getPos(elt) {
if (elt.isContentEditable) {  // for contenteditable
    elt.focus();
    let _range = document.getSelection().getRangeAt(0);
    let range = _range.cloneRange();
    range.selectNodeContents(elt);
    range.setEnd(_range.endContainer, _range.endOffset)
    return range.toString().length;
} else {  // for texterea/input element
    return elt.selectionStart;
}
}

function setPos(elt, pos) {
if (elt.isContentEditable) {  // for contenteditable
    elt.target.focus();
    document.getSelection().collapse(elt.target, pos);
} else {  // for texterea/input element
    elt.target.setSelectionRange(pos, pos);
}
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wchat-tag-container" style = "display: block;">
  <div class = "wchat-tag-panel">
    <!-- Contact List for tag -->
    <div class = "wchat-tag-panel-contact" data-member-id = "123" title = "123">
      <span class = "tag-panel-contact-name" valuetag = "Jason" value = "Jason">Jason</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "124" title = "124">
      <span class = "tag-panel-contact-name" valuetag = "bot2" value = "bot2">bot2</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "127" title = "127">
      <span class = "tag-panel-contact-name" valuetag = "Kopi" value = "Kopi">Kopi</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "555" title = "555">
      <span class = "tag-panel-contact-name" valuetag = "Hosthere" value = "Host here">Host here</span>
    </div>
    <div class = "wchat-tag-panel-contact" data-member-id = "60105653762" title = "60105653762">
      <span class = "tag-panel-contact-name" valuetag = "KopiBryant" value = "Kopi Bryant">Kopi Bryant</span>
    </div>
  
  </div>
</div>

<input type = "text" id = "textbox">

это на самом деле не отвечает на вопрос, не так ли?

— 26.12.2020 19:20

@DCR извините, я вижу второй вопрос, который я пропустил. Я обновлю его.

— 26.12.2020 19:25

спасибо .. похоже, это то, чего я хочу достичь. Спасибо друг

— 27.12.2020 10:48

26.12.2020 19:09