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

вопрос создан в Thu, May 2, 2019 12:00 AM

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

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

р>

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

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

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

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

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

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

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

    
3
  1. Я могу скопировать текст в IE 11.
    2019-05-02 15: 05: 17Z
  2. Да, нет проблем в IE11 для меня. В какой версии вы тестировали? 11 - единственная поддерживаемая версия, и единственная, которая удаленно совместима с современными веб-стандартами. Вы правы, что в Firefox это не работает.
    2019-05-02 15: 08: 35Z
  3. @ CodingFreak Да, вы имеете право, но я проверял это перед созданием этого поста и не могу скопировать текст. Может быть, я плохо проверил.
    2019-05-02 15: 23: 09Z
  4. visibility: hidden для победы. Возможно, вам понадобится добавить функциональность в вашу форму, но она будет работать!
    2019-05-02 16: 59: 58Z
3 ответа                              3                         

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

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

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

р>

input[readonly] {
  background: #EEE;
  color: #666;
  border: solid 1px #CCC;
}
<input readonly value="I am readonly">
    
2
2019-05-02 17: 26: 16Z
  1. Я предложил поведенческое решение; Использование readonly изменяет поведение. Стиль должен показать, что вам не нужно менять поведение, чтобы изменить внешний вид.
    2019-05-02 16: 25: 55Z

Я пытался использовать 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, чтобы он больше походил на отключенный ввод.

    
0
2019-05-02 16: 39: 14Z

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

<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.

    
0
2019-05-02 18: 26: 51Z
источник размещен Вот