Użyj atrybutu readonly w <input> bez zmiany kursora

Question

Jeśli mam pole <input> z atrybutem readonly, nadal będzie ono wyświetlane z kursorem tekstowym I-beam. Czy istnieje sposób, aby zatrzymać wyświetlanie tego kursora?

Nie mogę użyć atrybutu disabled, ponieważ request.getParameter() nie działa w wyłączonych polach.

Answer 1

Spróbuj znaczników w swojej formie do pola tekstowego

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

Główną rzeczą, która pomaga ukryć kursor jest onfocus = "ten .plama()".

Answer 2

Ideą elementów readonly jest to, że nadal można czytać i kopiować tekst, ale nie można ich edytować. Powiedziawszy, możesz zmienić kursor używając CSS attribute selectors. Ten przykład będzie pasować do każdego elementu input z atrybutem readonly:

input[readonly] { 
    cursor: pointer; 
} 

Answer 3

Nie chciałem, aby zastąpić domyślne style Bootstrap, tak doszedłem wraz z następującym roztworem:

Moje MNIEJ Plik:

input[readonly] { 
    &.default-cursor { 
     cursor: default; 
    } 
} 

Albo w CSS:

input[readonly].default-cursor { 
    cursor: default; 
} 

Moje HTML :

<input type="text" class="form-control text-xl default-cursor" readonly> 

Answer 4

Dla osób, które nie chcą w ogóle pokazywać karetki:

input[readonly] { 
    pointer-events: none; 
}