wake-up-neo.net

Entfernen Sie den Textzeiger/-zeiger aus der fokussierten Readonly-Eingabe

Ich verwende einen <input readonly="readonly">, der wie normaler Text gestaltet ist, um das Erscheinungsbild eines interaktiven Felds zu entfernen, aber den Wert immer noch anzuzeigen.

Dies ist sehr nützlich, um zu verhindern, dass ein Benutzer ein Feld bearbeitet, und gleichzeitig den Wert buchen kann. Mir ist klar, dass dies eine bequeme Methode ist und dass es mehrere Problemumgehungen gibt, aber ich möchte diese Methode verwenden.

Problem: Die blinkende Einfügemarke wird weiterhin angezeigt, wenn das Feld angeklickt/fokussiert wird. (Zumindest in FF und IE8 unter Win7)

Im Idealfall möchte ich, dass es sich wie gewohnt fokussiert verhält, aber ohne blinkende Einfügemarke.

Javascript-Lösungen sind willkommen.

htmlcssformscaret
39
Wesley Murch

Bei mir gibt es kein Caret oder so:

<input type="text" value="test" readonly="readonly" >

Schauen Sie sich das an: http://www.cs.tut.fi/~jkorpela/forms/readonly.html

Entschuldigung, jetzt verstehe ich dein Problem.

Versuche dies:

<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
42
n3on

Sie können dies in Ihrer CSS verwenden, aber es wird nicht fokussiert: 

[readonly='readonly'] {
   pointer-events: none;
}
8
Headache

Sie können das Blinkzeichen entfernen, indem Sie das Attribut css in transparent angeben

caret-color: transparent;

sie können das Ergebnis testen hier

5
Muhammad Husein

Es kann mit HTML und Javascript gemacht werden

<input type="text" onfocus="this.blur()" readonly >

oder jQuery

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });
3
Kld

der einzige Weg, den ich dafür fand, war

//FIREFOX
$('INPUT_SELECTOR').focus(function () {
                $(this).blur();
            });
//INTERNET Explorer
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
                $(this).blur();
            });
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');
0
alecellis1985

Die onfocus/blur-Methode funktioniert zwar, um den Cursor aus einem schreibgeschützten Feld zu entfernen, der Browser stellt jedoch nicht automatisch das nächste Feld scharf, und Sie verlieren möglicherweise den Fokus ganz, was der Benutzer normalerweise nicht erwartet. Wenn dies erforderlich ist, können Sie einfaches Javascript verwenden, um sich auf das nächste Feld zu konzentrieren, das Sie möchten. Sie müssen jedoch das nächste Feld angeben:

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

Dabei ist "NextField" der Name des Feldes, das aufgerufen werden soll. (Alternativ können Sie andere Möglichkeiten angeben, um das nächste Feld zu suchen.) Offensichtlich ist dies umso schwieriger, wenn Sie zu einem nicht sichtbaren Oberflächenelement wie einem Tab-Panel navigieren möchten, da Sie dies ebenfalls anordnen müssen.

0
andora

Einfach!

Fügen Sie einfach disabled zur Eingabe hinzu und es kann nicht angeklickt werden (fokussiert)

0
Tusko Trush