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

最新推荐文章于 2024-08-01 14:56:00 发布

真的凡_

最新推荐文章于 2024-08-01 14:56:00 发布

阅读量3k

点赞数 4

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_40997597/article/details/124328907

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天在写Servlet的时候，需要取到一个数据拿到前端显示且不可修改，先使用之disabled之后发现，把数据再次传到后端就拿不到了，找到解决办法之后也在这里整理一下。

以下三种方法在使用input文本框的时候可以使其是不可编辑、只读的状态。

disabled=“true”
disabled：禁用，不可编辑，数据也传不到后台

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>test</title>
  </head>
  <body>
    <form action="">
      <input type="text" name="name" value="zdd" disabled="true" />
    </form>
  </body>
</html>

readonly=“true”
readonly：只读，这个方法可以传值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>test</title>
  </head>
  <body>
    <form action="">
      <input type="text" name="name" value="zdd" readonly="true" />
    </form>
  </body>
</html>

οnfοcus=“this.blur()”
onfocus：聚焦（光标移入文本框输入时就是聚焦）
blur：去除聚焦，不能把光标放在这个文本框上且无法选中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>test</title>
  </head>
  <body>
    <form action="">
      <input type="text" name="name" value="zdd" onfocus="this.blur()" />
    </form>
  </body>
</html>