Кросс-браузер: различное поведение для отключенных полей ввода (текст может / не может быть скопирован)

Question

У меня есть поле ввода HTML, который отключен. В некоторых браузерах (Chrome, Edge, Internet Explorer и Opera) можно выделять и копировать текст, но, по крайней мере, в Firefox это невозможно.

Вы можете проверить это, выполнив следующий код в разных браузерах:

<input type="text" disabled value="is disable">
<input type="text" readonly value="is readonly">

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

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

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

И есть ли решение для копирования во всех браузерах текста из отключенного поля ввода?

Примечание. Мое приложение реализовано с использованием языков Angular/TypeScript.

---

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

Answer 1

Измените свое поле с disabled в readonly, Это правильный атрибут для поведения, которое вы хотите.

Не тратьте время на совместное решение javascript, так как оно будет еще более странным, чем незначительные различия в поведении браузера.

Если проблема заключается в том, что вы хотите, чтобы ваши поля только для чтения выглядели как отключенные поля, то довольно легко стилизовать ввод с помощью readonly набор атрибутов. Вам не нужно менять поведение, чтобы изменить внешний вид.

input[readonly] {
  background: #EEE;
  color: #666;
  border: solid 1px #CCC;
}

<input readonly value="I am readonly">

Answer 2

Я пытался использовать user-select во входе, но это не может помешать выделению текста к нему. Даже обернуть div с user-select: none стиль до сих пор не работает. Это работает только для (я думаю) нефокусируемого элемента, такого как div, span и т. Д.

Тем не менее, сейчас я думаю, user-select: none это единственный лучший вариант, если вы хотите убедиться, что пользователь не будет копировать текст со страницы даже во многих различных браузерах (проверьте совместимость выбранных пользователем браузеров). Поэтому я бы предложил создать компонент, который выглядит примерно так:

<input  *ngIf="!isDisabled" value="model" />
<div *ngIf="isDisabled" style="user-select: none">{{model}}</div>

Будьте осторожны div чтобы больше походить на отключенный ввод.

Answer 3

В этом нет ничего плохого, когда вы отключаете элемент управления формы.

<input type="text" disabled readonly value="is disable">

или же

<input type="text" disabled="disabled" readonly="readonly" value="is disable">

Однако это может не привести к согласованному поведению, так как оно относится к копированию текста (после его выбора).

Несовершенный путь JavaScript:

Я не использовал select введите событие через некоторое время, но я предлагаю переключить возможность выбора текста. Вы также можете поиграть с focus а также blur События.

Внешняя таблица стилей CSS:

.preventSelection {user-select: none}  // IE 10+

W3Schools: выбор пользователя:

Быстрый и грязный обработчик событий:

function preventDisabledControlTextCopy(e)
{
    // blah, blah, blah

    if (e.target.disabled === true) {
        // Add "preventSelection" to e.target.className
        // Alternatively, change the focus to somewhere else!
    } else {
        // Remove "preventSelection" from e.target.className
    }
}

// Blah, blah, blah-blah blah

textBox.addEventListener("select", preventDisabledControlTextCopy, false);

Поиск вариантов никогда не является пустой тратой времени. Я пропустил много деталей, но я сделал важную часть явной (так как Stackru - это инструмент, который люди используют для изучения вещей). Реализация зависит от вас.

Последние мысли:

Лучшим ответом может быть использование CSS и JavaScript и переключение visibility: hidden (IE 4+) или display: none (IE 8+), в зависимости от вашего сценария, структуры DOM и сложности, которой вы можете управлять.

Динамические формы - отличный способ почувствовать взаимодействие между HTML, CSS и JavaScript.