有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value="中国"> 的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。

方法1: onfocus=this.blur() 当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2:readonly 
<input type="text" name="input1" value="中国" readonly> 
<input type="text" name="input1" value="中国" readonly="true">

方法3: disabled 
<input type="text" name="input1" value="中国" disabled="true">

完整的例子:

<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />

disabled="true" 此果文字会变成灰色,不可编辑。 
readOnly="true" 文字不会变色,也是不可编辑的

css屏蔽输入:<input style="ime-mode: disabled">

有两种方法第一:disabled="disabled"这样定义之后被禁用的 input 元素既不可用,也不可点击。第二:readonly="readonly" 只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本;

让表单input等文本框为只读不可编辑的方法-转的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. HTML中让表单input等文本框为只读不可编辑的方法

    有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...

  3. HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中

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

  4. Jquery学习笔记:操作form表单元素之一(文本框和下拉框)

    一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...

  5. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. 对pdf 表单域 或文本框的操作---动态填充PDF 文件内容

    前提:需要pdf模板:并且模板内容以pdf 文本框的形式填写 package com.test;import java.io.File;import java.io.FileOutputStream; ...

  7. 将input 的文本框改为不可编辑状态

    <input type="text" id = "textid" name="名称" value="值" size ...

  8. 巧用jquery实现提交(submit)表单时候验证文本框是否为空

    http://www.cnblogs.com/wifi/articles/2387131.html 先引用jquery Html部分--------------------------------- ...

  9. html css input定位 文本框阴影 灰色不可编辑

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Kubernetes实战总结 - Ingress选型与应用

    一.概述 Ingress 是对集群中服务的外部访问进行管理的 API 对象,可以提供负载均衡.SSL 终结和基于名称的虚拟托管. 典型的访问方式是 HTTP,用于将不同URL的访问请求转发到后端不同的 ...

  2. scrapy框架结构与工作原理

    组件: ENGINE:引擎,框架的核心,其他组件在其控制下协同工作. SCHEDULER:调度器,负责对SPIDER提交的下载请求进行调度 DOWNLOADER:下载器,负责下载页面,发送HTTP请求 ...

  3. 简述vue的双向绑定原理

    一.前言 在vue的视图层与modal层进行数据交互的时,视图层的数据传入到modal层,modal层通过defineProperty来劫持每个元素,并绑定监听事件进行监听,一旦监听到数据变化,就通过 ...

  4. Python3笔记002 - 1.2 搭建python开发环境

    第1章 认识python 1.2 搭建python开发环境 1.2.1 python开发环境概述 python开发环境常见的操作系统: Windows Mac OS Linux 1.2.2 安装pyt ...

  5. 树的深度———树形DP

    题目描述 输入 输出 样例 样例输入 样例输出 7 分析 这道题数据有1000000,把每一个顶点都枚举一次显然不现实,肯定会T掉 所以,我们还是从图中找规律 按照习惯,我们先把1号节点作为根节点模拟 ...

  6. Redis哨兵集群创建脚本--v2

    1. 基础环境 操作系统版本  CentOS Linux release 7.6.1810 (Core) Docker 版本  19.03.11, build 42e35e61f3 Redis  版本 ...

  7. ATM + 购物车项目

    ''' 存放配置文件 ''' import os #获取项目根目录 BASE_PATH=os.path.dirname(os.path.dirname(__file__)) #获取用户目录 USER_ ...

  8. 使用CodeMirror插件遇到的问题

    CodeMirror的正常使用: //首先通过<script>标签引入相应的js,这个就不必说了 var myCodeMirror = CodeMirror.fromTextArea(my ...

  9. tinymce 设置和获取编辑器的内容

    $('目标元素').html(插入的内容) //设置tinymce编辑器的内容tinymce.get('目标元素').getContent() //获取tinymce编辑器的内容

  10. Scala 面向对象(七):静态属性和静态方法

    1 Scala中静态的概念-伴生对象 Scala语言是完全面向对象(万物皆对象)的语言,所以并没有静态的操作(即在Scala中没有静态的概念). 但是为了能够和Java语言交互(因为Java中有静态概 ...