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

Question

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

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

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

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

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

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

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

Примечание. Мое приложение реализовано с использованием языков 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);

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

Заключительные мысли:

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

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