Jak sprawić, by wprowadzanie tekstu nie było edytowalne?

Więc mam wejście tekstowe 

<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 zrobieniu etykiety zamiast tego, ale co powiesz na stylizację. Jak je przekonwertować i czy jest lepszy sposób, czy to jedyny sposób?

Author: Stephan Muller, 2010-09-09
Source

7 answers

<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

 623
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-12 00:57:53

Możesz dodać atrybut readonly do wejścia: 

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

Więcej informacji: http://www.w3schools.com/tags/att_input_readonly.asp

 57
Author: Stephan Muller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-23 12:47:11

Możesz użyć atrybutu readonly, jeśli chcesz, aby dane wejściowe były tylko odczytywane. I możesz użyć atrybutu disabled, jeśli chcesz, aby dane wejściowe były wyświetlane, ale całkowicie wyłączone(nawet przetwarzanie języków takich jak PHP nie będzie w stanie ich odczytać).

 38
Author: jolt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-09-09 11:40:02

Aby uzupełnić dostępne odpowiedzi:

Element wejściowy może być odczytywany lub wyłączany (żaden z nich nie jest edytowalny, ale jest kilka różnic: focus,...)

Dobre wyjaśnienie można znaleźć tutaj:
Jaka jest różnica między disabled= "disabled" i readonly = "readonly" dla pól wprowadzania formularzy HTML?

Jak używać: 

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

Istnieje również kilka rozwiązań, aby zrobić to za pomocą CSS lub JavaScript, jak wyjaśniono tutaj .

 22
Author: jsidera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:55:00

Dodaj atrybut readonly 

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

Lub - 

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

Css nie jest potrzebny!

 3
Author: Vibhaas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-10 04:22:43

Wystarczy dodać disabled na końcu 

<input type="text" value="3" class="field left" disabled>
 3
Author: Michan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-22 17:08:34 
<input type="text" value="3" class="field left" readonly>

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

Metoda ustawiania "readonly": 

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

Aby anulować "readonly" (praca w jQuery): 

$("input").attr("readonly", false)
 2
Author: J. Fan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-30 08:30:17