Как запретить пользователю вводить гиперссылки без использования contenteditable = false - PullRequest
Новая
       22

Как запретить пользователю вводить гиперссылки без использования contenteditable = false

0 голосов
/ 17 октября 2019

Ниже у меня есть contenteditable div, который генерирует гиперссылки из хештегов fe: 

<div contenteditable="true" >
I think StackOverflow is very <a class="hashtag" href="https://google.com">#helpful </a>
</div>

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

enter image description here

Я уже пытался использовать contenteditable = false для гиперссылки, но это не позволяет пользователюудалить его при нажатии клавиши Backspace. По крайней мере, не в браузере Firefox! 

<a class="hashtag" contenteditable="false"></a>

Существуют ли другие способы запрета ввода текста пользователем?

1 Ответ

1 голос
/ 17 октября 2019

это известная и все еще открытая ошибка в Firefox отчет об ошибках , все еще открытый за последние 8 лет.

обратите внимание, что вы пропускаете "окружение ложным значением, чтобы это работаловот так: <a class="hashtag" contenteditable="false"></a> Я на самом деле пытался запустить это на Chrome, и он отлично работал. 

<div contenteditable="true">
  I think StackOverflow is very  <a contenteditable="false">#helpful</a>
</div>

, если вы запустите это на Chrome, оно работает отлично, но в Firefox вы можете увидеть, что ошибка воспроизводится.

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

до tl: dr они используют библиотеку JavaScript, котораяпомогает разрабатывать приложения, требующие редактирования текста под названием Slate , которые вы можете попробовать. они также упоминают несколько других JavaScript-фреймворков под названием DraftJs, Quill и Prosemirror, на которые вы также можете взглянуть. эти библиотеки обеспечивают лучшую межбраузерную поддержку, что позволяет редактировать текст в браузере

...