Редактируемая проблема с выделением двойного щелчка на IE 11 - PullRequest
Новая
       13

Редактируемая проблема с выделением двойного щелчка на IE 11

0 голосов
/ 26 мая 2020

У меня есть редактируемый диапазон. Каждый раз, когда кто-то нажимает на диапазон, он вызывает функцию onclick и устанавливает для contentEditable значение True, а также настраивает несколько стилей. Затем я использую onblur, чтобы сохранить значение в базе данных с помощью вызова ajax. Когда я запускаю это на chrome и делаю двойной щелчок, он выбирает конкретное значение. Например: если есть значение «мм / дд / гггг», и если я дважды щелкну по гггг, то оно будет выделено, и я могу его изменить. Но это забава c. не работает в Inte rnet explorer. На IE, когда я делаю двойной щелчок, он может выбирать, но не вводить данные с моей клавиши клавиатуры. Опять же, когда я делаю двойной щелчок, все работает нормально. Я знаю, что это сложно объяснить, но я хочу, чтобы это работало так же в IE. Ниже представлена ​​моя функция onclick. 

function makeElementEditable(span){
  span.style.border = "1px solid black";
  span.style.fontSize  ="15px";
  span.style.padding = "5px";
  span.contentEditable = true;
  }
});
}

enter image description here

1 Ответ

1 голос
/ 27 мая 2020

Я тестировал IE и воспроизвел проблему. Я думаю, это связано с разным поведением в разных браузерах. Это задумано.

Вы можете попробовать использовать <input> вместо <span> в качестве обходного пути в IE. Чтобы сделать его максимально похожим на <span>, вы можете установить border из <input> на none: 

function makeElementEditable(span) {
  span.style.border = "1px solid black";
  span.style.fontSize = "15px";
  span.style.padding = "5px";
  span.style.width = "90px";
  span.contentEditable = true;
}
<div>
  <input type="text" onclick="makeElementEditable(this)" value="mm/dd/yyyy" style="border:none" />
</div>
...