Как заставить contenteditable элемент внутри кнопки работать в Firefox? - PullRequest
Новая
       12

Как заставить contenteditable элемент внутри кнопки работать в Firefox?

0 голосов
/ 29 мая 2018

Я хочу найти простое решение для этого, чтобы оно работало в Firefox, так как оно работает в Chrome, я думаю, что это может быть действие по умолчанию, которое выполняет кнопка, и предотвращает действие contenteditable, которое нужно выполнить.

Вот фрагмент кода, который работает с Chrome, но не работает с Firefox с чистым HTML, без CSS и JS:

Протестировано и не работает на:

  • Firefox Developer версии 61.0b7(64-разрядная версия)
  • версия для разработчиков Firefox 61.0b9 (64-разрядная версия)
  • Firefox, ночная версия 62.0a1 (2018-05-14) (64-разрядная версия)
  • Firefox, ночная версия 62.0a1 (2018-05-29) (64-разрядная версия)
  • Internet Explorer версия 11.48.17134.0

Я тестировал Chrome и Edge и работал отлично.

Фрагмент кода здесь: 

<button>
  <div contenteditable="true">
    This text can be edited by the user.
  </div>  
</button>

https://jsfiddle.net/8s3a3pak/1/

РЕДАКТИРОВАТЬ: кнопка может иметь в качестве дочернего элемента любой тип элемента, это может быть изображение, div [редактируемый илинет], p [редактируемый или нет], h1, h2, h3 ... [редактируемый или нет]

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

1 Ответ

0 голосов
/ 11 ноября 2018

Я не нашел решения (потому что firefox должен это исправить), но я нашел альтернативы после прочтения specs атрибута contenteditabl html.

Ниже вы можете увидеть, как это работает, попробуйте скопировать и вставить изображение на каждом и посмотреть, как изображение добавляется к элементу contenteditable.Не знаю, какое из них должно быть правильное поведение .

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content -->
<h1>
  DIV is editable and child of BUTTON
</h1>
<p>(NOT WORKING ON FIREFOX)</p>
<button>
  <div contenteditable="true">
    This text can be edited by the user.
  </div>  
</button>

<hr>

<p>(Some are working well, others partially)</p>

<h1>
  DIV is child, BUTTON is editable
</h1>
<button contenteditable="true">
  <div>
    This text can be edited by the user.
  </div>
</button>

<h1>
  BUTTON is editable and child of DIV
</h1>
<div>
  <button contenteditable="true">
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV is editable, BUTTON is child
</h1>
<div contenteditable="true">
  <button >
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV and BUTTON (child) are editable
</h1>
<div contenteditable="true">
  <button contenteditable="true">
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV(child) and BUTTON are editable
</h1>
<button contenteditable="true">
  <div contenteditable="true">
    This text can be edited by the user.
  </div>
</button>

https://jsfiddle.net/8s3a3pak/3/

...