In Google Chrome Version 54 deaktivierte Felder sind nicht wählbar

Question

Scheint nach dem letzten Google Chrome (Version 54) Update kann ich nicht mit der Maus Text von deaktivierten Feldern in meiner Website auswählen.

// Text inside this input not selectable by mouse but before it was ... 
<input type="text" value="text to copy via mouse" name="name" disabled> 

Es gibt keine strenge Antwort von Google-Support zu diesem Problem, wenn es Fehler oder Feature: https://productforums.google.com/forum/#!topic/chrome/YzPWsT_QnDU

begießen jemand wissen, ob es neue Funktion oder Fehler? und wenn es eine Möglichkeit gibt, diese Funktion durch css oder html Attribut zu überschreiben?

Answer 1

Wenn jemand für genau deaktiviert Schaltfläche Fall benötigen eine Lösung, fand ich nur so, wie es zu tun mit js Schaltfläche Implementierung durch jquery kopieren

$(document).ready(function() { 

     $("input[type='text']:disabled").each(function(index, value) { 

      var $element = $(value); 
      var width = $element.outerWidth(); 
      var height = $element.outerHeight(); 
      var $appendToElement; 

      // Wrapper element by relative positioned div 
      $element.wrap("<div>") 
      $appendToElement = $element.parent(); 
      $appendToElement.css({"position":"relative"}); 

      $("<div>") 
       .css({ 
        'position': 'absolute', 
        'top': 0, 
        'margin-top': $element.css('border-top-width'), 
        'margin-left': $element.css('border-left-width'), 
        'width': width, 
        'height': height, 
        'z-index': 10, 
        'cursor': 'pointer', 
      }) 
      .hover(
       function() { 
        $(this).html("Click to copy"); 
       }, 
       function() { 
        $(this).html(""); 
       } 
      ) 
      .click(function() { 
       copyToClipboard($(this).parent().find('input').val()); 
       $(this).html("Copied"); 
      }) 
      .appendTo($appendToElement); 

     }); 

}); 


function copyToClipboard(text) 
{ 
    if (window.clipboardData && window.clipboardData.setData) { 

     // IE specific code path to prevent textarea being shown while dialog is visible. 
     return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) { 

     var textarea = document.createElement("textarea"); 

     textarea.textContent = text; 
     textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge. 
     document.body.appendChild(textarea); 
     textarea.select(); 

     try { 
      return document.execCommand("copy"); // Security exception may be thrown by some browsers. 
     } catch (ex) { 
      return false; 
     } finally { 
      document.body.removeChild(textarea); 
     } 
    } 
} 

Answer 2

Einige Browser verhalten sich schon lange (wenn nicht für immer) so.

Dieses Verhalten scheint im Einklang mit the HTML spec zu sein:

• Behinderte Kontrollen nicht erhalten Fokus.
• Deaktivierte Steuerelemente werden in der Tab-Navigation übersprungen.
• Deaktivierte Steuerelemente können nicht erfolgreich sein.

Eine erfolgreiche Kontrolle ist "gültig" für die Einreichung. Bei jedem erfolgreichen Steuerelement wird der Name seines Steuerelements mit dem aktuellen Wert als Teil des übergebenen Formulardatensatzes gepaart.

...

Der Unterschied zwischen deaktiviert und nur lesbar ist, dass Nur-Lese-Kontrollen noch fokussierbar sind, so dass der Benutzer immer noch den Text auswählen und mit ihrem interagieren, während behinderten Kontrollen sind völlig nicht-interaktive .

(Hervorhebung von mir)

Verwenden readonly (und einige CSS-Regel es grau, wenn Sie ein anderes Aussehen wünschen) statt, wenn Sie die Eingabe wollen „zugänglich“ bleiben.

Firefox verhält sich seit langer Zeit so (siehe Probleme 195361 und 253870) zum Beispiel. Sie sind sich der Verhaltensänderung in Chrome bewusst (siehe comment 37).

WHATWG diskutiert auch die Frage (in der Regel): https://github.com/whatwg/html/issues/1852

Und für die Aufzeichnung, der Chromium bug auf diese Änderung im Zusammenhang ist dieses: https://bugs.chromium.org/p/chromium/issues/detail?id=626581

Answer 3

mir das gleiche Problem nach dem begegnet ist Chrome update und löste es, indem es "disabled" in "readonly" änderte. Ich habe keine Hinweise auf eine Änderung in diesem bestimmten Chrome-Update gefunden, die dieses Verhalten ändern würde, aber es gibt eine Menge Aktivitäten im Internet in den letzten Tagen, die genau diese Situation betreffen. (deaktivierter Eingang erlaubt keine manuelle Auswahl)

Wie Lucero darauf hinwies, stimmt dieses Verhalten mit den HTML-Spezifikationen überein, daher ist diese Änderung höchstwahrscheinlich ein Bugfix und wir sollten vorher keine deaktivierten Felder für diesen Zweck verwenden jetzt, dass es ein readonly Attribut genau dafür entworfen ist).

<input type="text" readonly />