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

有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改
 
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<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 键切换到该字段,还可以选中或拷贝其文本,能取到里面的value值并且来用。
 
 
 
让文本域前面的内容在文本域的左上角显示:

<span style="float:left">车主评价:</span><textarea></textarea>

让文本域前面的内容居中显示:

可以通过套表格实现:

<table><tr><td><span style="float:left">车主评价:</span></td><td><textarea></textarea></td></tr></table>

 

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

  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. 让表单input等文本框为只读不可编辑的方法-转

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

  4. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  5. 实现表单input文本框不可编辑的三种方法

    感谢原文作者:青灯夜游 原文链接:https://www.php.cn/div-tutorial-413133.html 目录 问题 实现方式 1.οnfοcus=this.blur() 2.read ...

  6. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  7. jQuery学习笔记(五)jQuery中的表单

    目录 单行文本框的应用 表单验证 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以 ...

  8. django中form表单的提交:

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  9. HTML中的表单

    1.HTML中表单元素的基本概念 HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合,因此是制作动态网站很重要的内容. 表单一般用来收集用户的输入信息 2.表单 ...

随机推荐

  1. scala 2.11报错error: not found: type Application

    FROM: http://j-q-j.org/scala/scala-2-11-application-error.html 这两天学习scala,官网下载的最新版本2.11,书用的是<Prog ...

  2. 【转】Go maps in action

    原文: https://blog.golang.org/go-maps-in-action ------------------------------------------------------ ...

  3. STL 源代码剖析 算法 stl_algo.h -- next_permutation

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie next_permutation ----------------------------- ...

  4. 解决rails4.0中send_file文件下载两次的问题

    之前在开发文件下载的功能时,我遇到了一个很奇怪的问题,点击下载链接,在chrome console中会出现两次请求,第一次返回200,下载的数据缓存在chrome的cache中,第二次返回304,直接 ...

  5. PHP上传文件类 代码练习

    类文件: <?php class upload{ protected $fileName; protected $uploadPath; protected $maxSize; protecte ...

  6. SQLServer:探讨EXEC与sp_executesql的区别详解

    摘要 MSSQL为我们提供了两种动态执行SQL语句的命令,分别是EXEC和sp_executesql;通常,sp_executesql则更具有优势,它提供了输入输出接口,而EXEC没有.还有一个最大的 ...

  7. C语言-数据结构(一)

    1.动态创建多维数组 int ** createArray(int rows, int cols) { int **x, i; x = (int **)malloc(rows * sizeof(*x) ...

  8. 基于C#的控制台的进度提示实现

    在网上搜了很多关键词,比如C#控制台如何删除上一行输出,C#如何控制台删除部分内容,但是都没有很好的教程. 所以自己动手研究一下.也不是什么高深的东西,如下: 用C#开发了一个爬虫下载器,为了知道还剩 ...

  9. SWFupload在IE9以上中的bug

    这几天在做图片上传的东西,是用swfupload是出现了再IE9下那选择文件的按钮无法点击的情况,在其他浏览器,例如Firefox.chrome都不会出现,后来google一下才发下这算是IE9以上和 ...

  10. ContentObserver与DatasetObserver区别

        1. ContentObserver ContentObserver主要是通过Uri来监测特定的Databases的表,如果该Databases表有变动则会通知更新cursor中的数据. 如果 ...