Jak sprawić, by wprowadzanie tekstu było nieedytowalne?

344

Więc mam wprowadzanie tekstu

<input type="text" value="3" class="field left">

Oto mój CSS

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;

Czy jest w tym jakieś ustawienie lub sztuczka, myślałem o stworzeniu etykiety, ale o stylizacji. Jak je przekonwertować i czy istnieje lepszy sposób, czy to jedyny sposób?

html css html-input Matt Elhotiby
źródło

Odpowiedzi:

706 
<input type="text" value="3" class="field left" readonly>

Nie wymaga stylizacji.

Zobacz <input>na MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

BoltClock
źródło
4
lub readonly = "readonly", jeśli podoba Ci się XML-y, zobacz przykład Stephana Mullera poniżej :)
Algy Taylor
1
@Algy Taylor: Tak, to było w pierwotnej odpowiedzi, gdy pierwotne pytanie miało nieprzyzwoity [xhtml] tag, który doprowadzał wszystkich do szału, co do którego standardu obowiązuje: /
BoltClock
Czy jest jakiś sposób, aby usunąć to czerwone kółko, która pojawia się po najechaniu textareaz readonlyatrybutu?
Chaudhry Waqas,
1
@Shafizadeh - Nie, i to jest dobra rzecz. Przeglądarki miałyby trudności z prawidłową implementacją i byłyby mylące dla ludzi do zrozumienia. nie staraj się, aby proste sterowanie wykonało złożone zadanie. Podziel dane wejściowe na części, przy czym każdy element jest prosty (edytowalny element sterujący, następnie nieedytowalny element HTML, a następnie inny element edytowalny).
ToolmakerSteve
1
Upewnij się również, aby sprawdzić tę stronę serwera, jeśli nie chcesz, aby wartość ta została utrwalona. W narzędziu programisty przeglądarki łatwo jest usunąć atrybut, co z kolei powoduje, że pole wejściowe można ponownie edytować.
Kurt Van den Branden
41

Możesz użyć readonlyatrybutu, jeśli chcesz tylko czytać dane wejściowe. Możesz użyć disabledatrybutu, jeśli chcesz wyświetlać dane wejściowe, ale całkowicie wyłączone (nawet języki przetwarzania takie jak PHP nie będą w stanie ich odczytać).

wstrząs
źródło
2
Kiedy wysyłasz formularz do pliku php, nie odczytuje on wyłączonych danych wejściowych. To może być to, co miał na myśli.
Carlos2W
3
tak naprawdę dzieje się tak, że wyłączone dane NIE SĄ JESZCZE WYSŁANE podczas przesyłania formularza, nie mają nic wspólnego z php, js ani czymkolwiek innym.
vasilevich
28

Aby wypełnić dostępne odpowiedzi:

Element wejściowy może być tylko do odczytu lub wyłączony (żadnego z nich nie można edytować, ale istnieje kilka różnic: fokus, ...)

Dobre wyjaśnienie można znaleźć tutaj:
Jaka jest różnica między disabled = „disabled” a readonly = „readonly” dla pól wejściowych formularza HTML?

Jak używać:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

Istnieje również kilka rozwiązań umożliwiających przejście przez CSS lub JavaScript, jak wyjaśniono tutaj .

jsidera
źródło
5
Jeśli zamierzasz użyć />do zamknięcia tagów, możesz również rozszerzyć swoje atrybuty do disabled="disabled"i readonly="readonly".
BoltClock
5 
<input type="text" value="3" class="field left" readonly>

Możesz zobaczyć w https://www.w3schools.com/tags/att_input_readonly.asp

Metoda ustawienia „tylko do odczytu”:

$("input").attr("readonly", true)

aby anulować „tylko do odczytu” (praca w jQuery): 

$("input").attr("readonly", false)
J. Fan
źródło
3

dodaj atrybut tylko do odczytu

<input type="text" value="3" class="field left" readonly="readonly" >

lub -

<input type="text" value="3" class="field left" readonly>

nie wymaga css!

Vibhaas Srivastava
źródło
22
Co to powoduje, że moja odpowiedź i odpowiedź Stephana sprzed ponad 3 lat jeszcze tego nie zrobiły? Odzwierciedlałeś nawet moje stwierdzenie, że CSS nie jest potrzebny.
BoltClock
2

po prostu musisz dodać wyłączone na końcu

<input type="text" value="3" class="field left" disabled>
Michan
źródło
1
Wartość nie zostanie przesłana, jeśli zostanie ustawiona jako wyłączona. Może być to, czego potrzebujesz, ale nie o to pytano. Na marginesie, przyszedłem tutaj właśnie dlatego, że moje „wyłączone” wejście nie zachowywało się tak, jak się spodziewałem
Balmipour
2

Dodaj readonly:

<input type="text" value="3" class="field left" readonly>

Jeśli chcesz, aby wartość nie była przesyłana w formularzu, zamiast tego dodaj disabledatrybut.

<input type="text" value="3" class="field left" disabled>

Nie ma sposobu na użycie CSS, który zawsze działa, aby to zrobić.

Dlaczego? CSS nie może „wyłączyć” niczego. Nadal możesz wyłączyć wyświetlanie lub widoczność i używać, pointer-events: noneale pointer-eventsnie działa na wersjach IE, które pojawiły się wcześniej niż IE 11.

zixuan
źródło
0

jeśli naprawdę chcesz użyć CSS , użyj następującej właściwości, która sprawi, że pole nie będzie edytowalne.

pointer-events: none;
saadk
źródło