首页 > 软件开发 > HTML >

html如何设置标签input文本框为只读

来源:互联网 2023-03-16 19:10:54 471

html中的input用处很广泛,尤其是当我们在网页开发中需要用到表单的时候。这里我们看看有哪些方法让input标签不可编辑。kqf办公区 - 实用经验教程分享!

html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

工具/原料

  • DreamweaverCS6

方法/步骤

  • 1

    我们创建一个html5页面,添加如下图所示input标签。创建过程我就不说了,Ctrl n即可,这里我们创建的是H5的页面,当然,h4的也行。kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

  • 2

    然后我们在Dreamweaver中切换为实时视图。右侧页面预览中的标签input中,我们可以看到,鼠标光标还是可以在上面进行编辑的。kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

  • 3

    接下来我们把鼠标光标放到input标签代码中间即可,然后就可以看到Dreamweaver下方出现input标签的属性编辑选项了。如下图,我们把只读勾选即可。然后我们就可以看到input标签代码里面出现了一个readonly,这里我们也可以直接添加这个属性到代码中的。这时候,我们再看,input输入框已经不能输入了。kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

  • 4

    然后我们再看看另一种方式,就是把input设置为禁用,和刚才的只读一样,我们勾选禁用即可,如下图,input输入框不能进行输入了。kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

  • 5

    第三种方式,我们还可以设置输入框的焦点事件,如下图,把焦点事件设置成鼠标模糊动作,就可以让输入框获取不到焦点了,自然就无法编辑了。kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

  • 6

    最后,我们把整体的几个方法放到一起看看。如下图。kqf办公区 - 实用经验教程分享!

    html如何设置标签input文本框为只读?kqf办公区 - 实用经验教程分享!

  • 6本页面未经授权抓取自百度经验
  • 注意事项

    • input输入框只读属性根据需要按不同方法设置

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!kqf办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码