Rumah hujung hadapan web html tutorial html中实现input文本框不可编辑的方法

html中实现input文本框不可编辑的方法

Oct 27, 2017 am 10:18 AM
html input

有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,

如使input text的内容,中国两个字不可以修改有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,

如使<input type="text" name="input1" value="中国"> 的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。 

方法1: onfocus=this.blur() 当鼠标放不上就离开焦点

&lt;input type=&quot;text&quot; name=&quot;input1&quot; value=&quot;中国&quot; onfocus=this.blur()&gt;
Salin selepas log masuk

方法2:readonly

我喜欢用这个,能防止修改内容,

copy后台还能够接受传值,同其他输入的数据一起保存到数据库

&lt;li class=&quot;l1&quot;&gt;&lt;span&gt;项目名称&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;l2&quot;&gt;&lt;input  name=&quot;entryName&quot; id=&quot;entryName&quot;
style=&quot;color: #444&quot;  type=&quot;text&quot; value=&quot;邢台县“群众办事不出村”政务服务平台扩建项目&quot; readonly=&quot;true&quot;&gt;&lt;/li&gt;
Salin selepas log masuk
&lt;input type=&quot;text&quot; name=&quot;input1&quot; value=&quot;中国&quot; readonly&gt;   
&lt;input type=&quot;text&quot; name=&quot;input1&quot; value=&quot;中国&quot; readonly=&quot;true&quot;&gt;
Salin selepas log masuk

方法3: disabled

&lt;input type=&quot;text&quot; name=&quot;input1&quot; value=&quot;中国&quot; disabled=&quot;true&quot;&gt;
Salin selepas log masuk

完整的例子:

&lt;input name=&quot;ly_qq&quot; type=&quot;text&quot; tabindex=&quot;2&quot; onMouseOver=&quot;this.className=&#39;input_1&#39;&quot; onMouseOut=&quot;this.className=&#39;input_2&#39;&quot; 
value=&quot;123456789&quot; disabled=&quot;true&quot; readOnly=&quot;true&quot; /&gt;
Salin selepas log masuk

disabled="true" 此果文字会变成灰色,不可编辑。
readOnly="true" 文字不会变色,也是不可编辑的
css屏蔽输入:

&lt;input style=&quot;ime-mode: disabled&quot;&gt;
Salin selepas log masuk

有两种方法:

第一:disabled="disabled"这样定义之后被禁用的 input 元素既不可用,也不可点击。

第二:readonly="readonly" 只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本;

Atas ialah kandungan terperinci html中实现input文本框不可编辑的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Jadual Bersarang dalam HTML

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Sempadan Jadual dalam HTML

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

HTML jidar-kiri

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Susun Atur Jadual HTML

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Memindahkan Teks dalam HTML

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Senarai Tertib HTML

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Butang onclick HTML

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?

See all articles