<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
// change()方法 在id 为txt 的TextBox 触发 onkeyup 事件时执行
function change()
{
//找到txt 并获得他的内容
//var value=document.getElementByName('txt').value;
var value=document.getElementById('txt').value;
//计算还可以输入多少字符
var sum=20-value.length;

//判断能输入的字符数是否为负
if(sum<0)
{
//找到显示控件 并显示相应提示
document.getElementById('showDiv').innerHTML= '您还可以输入'+sum+'字符';
//为负设置颜色为红色
document.getElementById('showDiv').style.color='red';
}
else{
document.getElementById('showDiv').innerHTML= '您还可以输入'+sum+'字符';
document.getElementById('showDiv').style.color='green';
}
}
</script>
</head>
<body>

<div>
<h1 id="myHeader">Hello World!</h1>
<span class="tips" id="phonediv">输入测试文字</span>
<input type="text" id="txt" placeholder="请输入用户名" onblur="change()" required/>
<div id='showDiv'>您还可以输入20字符</div>

</div>
</body>
</html>

五、HTML判断输入长度，体会字体颜色变化的更多相关文章

  1. iOStextFiled判断输入长度

    个人在开发当中发现在用textField的代理方法 -(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(N ...

  2. Android 字体颜色变化（点击）

    在开发的过程中,经常会遇到这样的场景,点击按钮,背景颜色发生变化:在drawable中,定义xxx.xml(selector) <selector xmlns:android="htt ...

  3. textField 判断输入长度限制

    - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...

  4. 修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

    一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的,输入文本信息也是默认为黑色的,如图所示: 修改placeholder提示内容的颜色关键代码及实现: 实现输 ...

  5. Shell脚本中判断输入参数个数的方法投稿：junjie 字体：[增加 减小] 类型：转载

    Shell脚本中判断输入参数个数的方法 投稿:junjie 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Shell脚本中判断输入参数个数的方法,使用内置变量$#即可实现判断输入了多少个参数 ...

  6. js判断输入字符串长度（汉字算两个字符，字母数字算一个）

    js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head&g ...

  7. android 设置字体颜色、EditText自己主动输入转换成大写字母的多种方式

    在TextView上面设置某一个字的字体颜色为指定颜色时,能够通过java类SpannableString类和Html语言来实现. (一)SpannableString类方式 private void ...

  8. 编写Java程序，判断输入的三条长度的边，是否能构成三角形

    需求说明: 编写Java程序,判断输入的三条长度的边,是否能构成三角形. (三角形第三边大于两边之和小于两边之差) 实现代码: package test; import java.util.Scann ...

  9. js动态设置输入框字体/颜色

    动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...

随机推荐

  1. java中interface的详解

    JAVA的核心概念:接口(interface) 接口与类属于同一层次,实际上,接口是一种特殊的抽象类. 如:    interface IA{ }  public interface: 公开接口  与 ...

  2. java中的运算符

    1.      赋值运算符:  (=) 2.      算术运算符:  (+ ,- , * , /, %) 3.      逻辑运算符:  (&& ,||, !) 4.      关系 ...

  3. android studio 生成aar包并在其他工程引用 (导入)aar包

    1.aar包是Android studio下打包android工程中src.res.lib后生成的aar文件,aar包导入其他android studio 工程后,其他工程可以方便引用源码和资源文件 ...

  4. 在linux中配置安装telnet服务

    Telnet 是一种流行的用于通过 Internet 登录到远程计算机的协议.Telnet 服务器软件包为远程登录主机提供了支持.要通过 Telnet 协议与另一台主机通讯,您可以使用名称或 Inte ...

  5. ckeditor插件

    插件下载地址:http://ckeditor.com/download 1.CKeditor配置 在html页面的<head>标签中引入核心文件 ckeditor.js <scrip ...

  6. AngularJS-系统代码的配置和翻译

    前言:在Web开发中常常会遇到这样的情况,有些页面的下拉选项是固定不变的几个,比如:性别,一般有男.女.保密等.对于这样的情形我们一般在数据库中存储的是数字或者其对应的代码,如果是可维护的需要系统给出 ...

  7. LR12.53—第6课：运行负载测试

    第6课:运行负载测试 当你运行一个负载测试,LoadRunner将生成系统上的负载.然后,您可以使用LoadRunner的监控器和图形负载下,观察系统的性能. 在这一课中,你将涵盖以下主题: 一目了然 ...

  8. Tcp/IP

     在数据传输完毕之后,通信双方都可以发出释放连接的请求.释放连接的过程为如上图所示:      1)数据传输结束后,主机A的应用进程先向其TCP发出释放连接请求,不在发送数据.TCP通知对方要释放从A ...

  9. Java集合框架（常用类） JCF

    Java集合框架(常用类) JCF 为了实现某一目的或功能而预先设计好一系列封装好的具有继承关系或实现关系类的接口: 集合的由来: 特点:元素类型可以不同,集合长度可变,空间不固定: 管理集合类和接口 ...

  10. 简单配置webpack自动刷新浏览器

    文档地址  http://webpack.github.io/docs/usage.html 首先全局安装webpack(我这里使用的是淘宝的cnpm) cnpm install webpack 检查 ...