Удаление элементов из строки, созданной с помощью Array.join (''). Как я могу сохранить пробелы в начале? - PullRequest
Новая
       26

Удаление элементов из строки, созданной с помощью Array.join (''). Как я могу сохранить пробелы в начале?

1 голос
/ 07 июля 2019

У меня есть два div с.Div слева - мой ввод, div справа - мой запрос, где я отображаю слова, которые нужно набирать по порядку.

При каждом нажатии клавиши во вводе первый символ текущего слова в приглашении div удаляется (при условии, что он совпадает с тем, который я только что набрал при вводе).

После того, как я ввел в поле ввода все символы слова, указанного в приглашении, я подтверждаю это нажатием клавиши «Пробел» и перехожу к следующему слову.

Все идет хорошо, пока не будет набрано все слово, и внезапно нет пробела между содержимым ввода и следующим словом в приглашении.Он просто исчезает (обратите внимание, что пробелы между словами происходят из параметра [separator] в Array.join (), который я использовал для отображения содержимого в моем приглашении div.

Я уже пытался replace Array.join(' ') with Array.join('*').Это решило мою проблему, поскольку звездочка не исчезает после ввода всего слова, в отличие от моего разделителя пробелов, однако я не хочу, чтобы мое слово отделялось каким-либо «символом», кроме пробелов.

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

let animals = ['dog', 'horse', 'cat', 'dog', 'horse', 'cat', 'dog', 'horse', 'cat', 'dog', 'horse', 'cat'];

let animalsString = animals.join(' ');

document.querySelector('.animals-container').innerText = animalsString;

document.querySelector('.input').addEventListener('keydown', () => {

  let remainingChars = this.animals[0].slice(1);
  this.animals = this.animals.slice(1);
  this.animals.unshift(remainingChars);

  document.querySelector('.animals-container').innerText = this.animals.join(' ');
});
.app {
  display: flex;
}

.input {
  text-align: right;
}
<div class="app">
  <input class="input">
  <p class="animals-container"></p>
</div>

Codepen: https://codepen.io/anon/pen/zVmBjP

Ожидается пробел между входным содержимым div и первым словом приглашения, когдавсе слово было напечатано.

1 Ответ

0 голосов
/ 07 июля 2019

HTML не отображает начальные пробелы. Вместо этого используйте неразрывный пробел.

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

Я бы предложил использовать строку для отслеживания прогресса, а не массив.

Попробуйте использовать это: 

let animals = ['dog', 'horse', 'cat', 'dog', 'horse', 'cat', 'dog', 'horse', 'cat', 'dog', 'horse', 'cat'];

let animalsString = animals.join(' ');

document.querySelector('.animals-container').innerText = animalsString.split(" ").join("\xa0"); //Use non-breaking space

document.querySelector('.input').addEventListener('keyup', () => {
  var inputText = document.querySelector(".input").value
  if (!animalsString.startsWith(inputText)) {
    document.querySelector(".input").value = inputText.slice(0, inputText.length - 1)
  }
  document.querySelector('.animals-container').innerText = animalsString.slice(inputText.length).split(" ").join("\xa0"); //Use non-breaking space
});

https://codepen.io/anon/pen/rEqyRP

...