一个文本框，禁止输入文本有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. vb脚本自动更新版本信息

    使用的串口显示软件为secureCrt,支持脚本功能,今天写了一个简单的软件升级脚本(VB脚本). 如下: # $language = "VBScript" # $interfac ...

  2. hud 2099

    #include <stdio.h> #include <stdlib.h> int main() { int m,n,i,flag; ) { flag=; && ...

  3. flash跨域策略文件crossdomain.xml配置详解

    来源:http://www.2cto.com/Article/201108/100008.html 0x01 简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了 ...

  4. android studio导入包后无法import

    android studio导入jar包的方法: 1.将jar包放到module的libs目录下 2.在所导入的jar包上右键,选择“Add as library”. 其中,第二点跟eclipse不同 ...

  5. Win7 “Bluetooth设置”对话框无法打开，及无法查找到设备

    方法是在百度上找到的,试用成功. 1.打开开始菜单中的运行选项,然后在对话框中输入services.msc,回车打开服务界面: 2.然后在弹出来的服务窗口中查找到Bluetooth Support S ...

  6. drupal7 分页

    $output = ""; $query = db_select('feedback','f')->extend('PagerDefault');//->extend( ...

  7. 国内的cdn

    测试了一下,百度的非常快 ----------------------------------------------------------------------- 原文:https://www. ...

  8. Bill Total Value

    Bill Total Value time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  9. Template - Strategy

    模板模式是一种基于继承的松耦合模式,其设计思路为,abstract类提供一组接口但不实现,不同concrete类继承同一接口并完成不同功能.如下图所示: 模板模式实现较为简单,TemplateMeth ...

  10. JS-运动基础（一）续

    2.淡入淡出的图片 用变量存储透明度 <title>无标题文档</title> <style> #div1{width:293px; height:220px; b ...