Bagaimana cara membuat input teks tidak dapat diedit?

344

Jadi saya punya input teks

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

Inilah CSS saya untuk itu

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;

Apakah ada pengaturan atau trik untuk ini, saya berpikir untuk membuat label, tetapi bagaimana dengan styling. Bagaimana cara mengonversinya dan apakah ada cara yang lebih baik atau apakah itu satu-satunya cara?

html css html-input Matt Elhotiby
sumber

Jawaban:

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

Tidak perlu styling.

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

BoltClock
sumber
4
atau readonly = "readonly" jika Anda suka XML-y, lihat contoh Stephan Muller di bawah ini :)
Algy Taylor
1
@Algy Taylor: Ya, itu ada dalam jawaban asli ketika pertanyaan asli memiliki tag [xhtml] bandel yang membuat semua orang bingung tentang yang berlaku untuk standar mana: /
BoltClock
apakah ada cara untuk menghapus lingkaran merah yang muncul ketika Anda hover atas textareadengan readonlyatribut?
Chaudhry Waqas
1
@ Shafizadeh - Tidak, dan itu bagus. Akan sulit bagi browser untuk menerapkan dengan benar, dan membingungkan bagi orang untuk mengerti. jangan mencoba membuat kontrol sederhana melakukan tugas yang kompleks. Hancurkan input Anda menjadi beberapa bagian, dengan masing-masing bagian sederhana (kontrol yang dapat diedit, kemudian elemen HTML yang tidak dapat diedit, kemudian kontrol yang dapat diedit lainnya).
ToolmakerSteve
1
Pastikan juga untuk memeriksa sisi server ini jika Anda tidak ingin nilainya bertahan. Mudah di alat pengembang browser untuk menghapus atribut, yang pada gilirannya membuat bidang input lagi dapat diedit.
Kurt Van den Branden
41

Anda dapat menggunakan readonlyatribut, jika Anda ingin input Anda hanya dibaca. Dan Anda dapat menggunakan disabledatribut, jika Anda ingin input ditampilkan, tetapi benar-benar dinonaktifkan (bahkan memproses bahasa seperti PHP tidak akan dapat membacanya).

sentakan
sumber
2
Saat Anda mengirim formulir ke file php, itu tidak akan membaca input yang dinonaktifkan. Mungkin itu yang dia maksud.
Carlos2W
3
apa yang sebenarnya terjadi adalah bahwa input yang dinonaktifkan TIDAK DIKIRIM KIRIM ketika Anda mengirimkan formulir, tidak ada hubungannya dengan php, js atau apa pun.
vasilevich
28

Hanya untuk melengkapi jawaban yang tersedia:

Elemen input dapat dibaca atau dinonaktifkan (tidak ada yang dapat diedit, tetapi ada beberapa perbedaan: fokus, ...)

Penjelasan yang baik dapat ditemukan di sini:
Apa perbedaan antara disable = “disable” dan readonly = “readonly” untuk kolom input form HTML?

Cara Penggunaan:

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

Ada juga beberapa solusi untuk membuatnya melalui CSS atau JavaScript seperti yang dijelaskan di sini .

jsidera
sumber
5
Jika Anda akan menggunakan />untuk menutup tag Anda, Anda mungkin juga memperluas atribut untuk disabled="disabled"dan readonly="readonly"juga.
BoltClock
5 
<input type="text" value="3" class="field left" readonly>

Anda dapat melihat di https://www.w3schools.com/tags/att_input_readonly.asp

Metode untuk mengatur "readonly":

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

untuk membatalkan "readonly" (berfungsi di jQuery): 

$("input").attr("readonly", false)
J. Fan
sumber
3

tambahkan atribut readonly

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

atau -

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

tidak perlu css!

Vibhaas Srivastava
sumber
22
Apa yang ditambahkan ke pertanyaan yang belum dijawab oleh saya dan jawaban Stephan lebih dari 3 tahun sebelumnya? Anda bahkan mencerminkan pernyataan saya tentang CSS yang tidak diperlukan.
BoltClock
2

Anda hanya perlu menambahkan dinonaktifkan di akhir

<input type="text" value="3" class="field left" disabled>
Michan
sumber
1
Nilai tidak dikirimkan jika Anda menyetelnya ke dinonaktifkan. Mungkin itu yang Anda butuhkan, tetapi bukan itu yang diminta. Sebagai catatan, saya datang ke sini justru karena input "cacat" saya tidak berlaku seperti yang saya harapkan
Balmipour
2

Tambahkan readonly:

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

Jika Anda ingin nilai tidak dikirimkan dalam formulir, alih-alih tambahkan disabledatribut.

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

Tidak ada cara untuk menggunakan CSS yang selalu berfungsi untuk melakukan ini.

Mengapa? CSS tidak dapat "menonaktifkan" apa pun. Anda masih dapat mematikan tampilan atau visibilitas dan penggunaan pointer-events: nonetetapi pointer-eventstidak berfungsi pada versi IE yang keluar lebih awal dari IE 11.

zixuan
sumber
0

jika Anda benar-benar ingin menggunakan CSS , gunakan properti berikut yang akan membuat bidang tidak dapat diedit.

pointer-events: none;
Saadk
sumber
Oh, oh, oh. Ini tidak berfungsi di beberapa browser.
zixuan