一个文本框，禁止输入文本有2个方式，一个是利用readonly ，一个是利用 disabled.

那么两者虽然目的都可以达到，但是从表现上来看disabled会显得更加的直观，为什么这么说。

请看截图：

如图所示:

1为readonly,2为diabled.显然使用diabled的修饰的文本框变成了灰色，综上，推荐使用disabled来让文本框变得不可输入。

但是对于时间框框那种不能输入的，更推荐使用readonly 来完成。

相应代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="../js/lib/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#readonly").prop("readonly", true);

            $("#disable").prop("disabled", true);

        })

    </script>

</head>

<body>

<input id="readonly" type="text">

<input id="disable" type="text">

</body>

</html>

HTML之禁止输入文本的更多相关文章

  1. JS控制文本框禁止输入特殊字符

    JS 控制不能输入特殊字符<input type="text" class="domain" onkeyup="this.value=this. ...

  2. JS 控制文本框禁止输入例子

    JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.v ...

  3. input 文本框禁止输入表情

    js在用户输入表情时自动过滤掉 <input type="text" id="input" maxlength="10"/> v ...

  4. Jquery / js 判断数据类型方法（限制文本框类型输入）

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  5. 禁止输入中文 与 禁止输入数字在phonegap api环境效果

    例子如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  6. iOS之富文本

    之前做项目时遇到一个问题: 使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结果在XCode中查 ...

  7. 文本框限制输入类型<input>的输入框

    最近在开发完一个项目后,又测试人员测试bug,然后我根据他们测试出来的bug一个一个的改,然后就遇到了一个问题,文本框是用来搜索,但是,比如这个文本框是用来搜索年龄的区间,输入条件的时候,如果输入了非 ...

  8. UITextView(文本视图) 学习之初体验

    UITextView文本视图相比与UITextField直观的区别就是UITextView可以输入多行文字并且可以滚动显示浏览全文.常见UITextView使用在APP的软件简介.内容详情显示.小说阅 ...

  9. 最全的Swift社交应用文本输入优化汇总

    在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?本文将汇总一下Swift社交应用文本输入优化技巧. AD: 一.输入相 ...

随机推荐

  1. JavaScript高级程序设计：第十二章

    DOM1级主要定义的是HTML和XML文档的底层结构.DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性.为此DOM2和DOM3级分为许多模块,这些模块如下: D ...

  2. Ubuntu服务器断网问题解决

    原因:dns服务器没有了配置信息. 配置dns服务器          ubuntu 的dns服务器信息,放在 /etc/resolv.conf中,          添加dns服务器地址,如192. ...

  3. C# Memcached缓存

    net/c#分布式缓存系统Memcached简介与实践--非常好 缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是 ...

  4. listview前几个item的图片怎么是空白的、listview更新了ui不起作用、在handler里更新了UI不起作用

    不是不起作用,不信你可以在更新ui代码附近加输出的log,说明程序是跑到那里了.但是未达到我们的想要的效果. 我们知道在listview里更新UI,listview的适配器Adapter里有个getV ...

  5. 图片应该放在drawable-hdpi下不要放在drawable下

    图片应该放在drawable-hdpi下或者mipmap-hdpi 不要放在drawable下,要不然显示有些不同

  6. jquery datatable 参数api

    jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明 ...

  7. Docker 简介及安装

    Docker简介: 什么是Docker?将应用程序自动部署到容器 go语言开源引擎  Github地址:https://github.com/docker/docker 2013年初 dotCloud ...

  8. ubuntu 上下载PHP的源代码

    参考: https://vpsineu.com/blog/how-to-build-and-install-php-5-6-9-from-source-on-ubuntu-14-04-vps/ 直接 ...

  9. js中子页面父页面方法和变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名window.parent相当于定位到父页面 之后的操作和在父页面中写代码一样写 window.parent.aa ...

  10. Parade

    Parade time limit per test 1 second memory limit per test 256 megabytes input standard input output ...