首页 > 解决方案 > 无法在 FireFox 上编辑 contenteditable div

问题描述

我尝试在我的特定项目中使用 div 作为输入。

用户可以拖动项目。

问题出在 Firefox 上,无法编辑“测试”。

进行测试,请等待 3 秒。

剧本:

$(document).ready(function() {
  $(".form_bal_textfield").draggable({
    helper: function() {
      return getTextFieldHTML();
    },
    connectToSortable: ".form_builder_area"
  });

  $(".form_builder_area").sortable({
    cursor: 'move',
    placeholder: 'placeholder',
    start: function(e, ui) {
      ui.placeholder.height(ui.helper.outerHeight());
    },
    stop: function(ev, ui) {
     
    }
  });
  $(".form_builder_area").disableSelection();


});

function inputChange(objInput) {
  objInput.setAttribute('value', objInput.value);
}
#label_mkxztyxf {
  border: 1px solid #DFE3E7;
  padding: .47rem .8rem;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://filebin.net/z6dqw9j0nlzssg41/draggable.css">

<br/>
<div id="lblSource" class="form_builder_area ui-sortable">
  <div id="label_mkxztyxf" onchange="inputChange(this);">
    <div class="fr-wrapper" dir="rtl">
      <div contenteditable="true">test</div>
    </div>
    <script src="https://filebin.net/z6dqw9j0nlzssg41/jquery-ui.js"></script>

标签: javascripthtmljquerycontenteditabledrag

解决方案


推荐阅读