<!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. 01-C#入门（函数重载、委托）

    函数的重载 相对委托,是比较好理解的. 涉及一个概念:函数签名.函数签名包括函数的名称和参数,而函数重载:就是使用相同的名称和不同的参数(参数类型.传递方式[传值或引用])来实现的.而不能声明相同的函 ...

  2. Google App Engine, Python2.7的UnicodeDecodeError bug

    在跟Web Development,要在Google App Engine上写作业,出师不利,遇到以下bug: 2014-05-06 16:14:17 Running command: "[ ...

  3. 【HEVC】4、HM-16.7编码一个CU(帧内部分) 3.帧内预测各种模式实现

    HEVC中一共定义了35中帧内编码预测模式,编号分别以0-34定义.其中模式0定义为平面模式(INTRA_PLANAR),模式1定义为均值模式(INTRA_DC),模式2~34定义为角度预测模式(IN ...

  4. W5500 keep-alive的用途与用法--新华龙电子

    大家是否遇到过这样的问题,W5500作为服务器已经建立连接,突然网线掉了,然后再去连接W5500,就连不上了.为什么?下面对这个问题进行解释说明,并提出解决办法. 图1中的上位机程序作为客户端,连接W ...

  5. GNU/Linux复习笔记(1)

    第一次接触GNU/Linux还是大四上学期实习的那两个月在window里装了 个虚拟机玩红帽的系统,那段时间稍微学了一点命令就不玩了.后来大四下学期认识了王总,装了双系统,那段时间又对linux有了进 ...

  6. :before和 :after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  7. 关于jq+devexpress基础知识总结（随便的基础）

    //获取某行某列的值 onSelectionChanged: function (selectedItems) { ]; if (data != null) postionno = data.POST ...

  8. jsp+tomcat+mysql+sevlet+javabean配置过程

    在配置jsp开发环境的过程中会碰到不少问题,感谢网上的许多前辈的经验总结,作者cl41的JSP连接Mysql数据库攻略和作者Saulzy的MySQL学习笔记等文章对我来说简直是雪中送碳,为了帮助象我一 ...

  9. 【原创】android内存管理-hprof文件

    转载请注明出处 http://www.cnblogs.com/weiwangnuanyang/p/5703702.html 如果只是想确定一下某一个场景是否有内存泄漏,AndroidStadio的控制 ...

  10. leetcode174. Dungeon Game

    // learn from https://discuss.leetcode.com/topic/6912/c-dp-solution ''' class Solution { public: int ...