效果:

input:

textarea: 限100字

源码:

input:
<input name="textfield" type="text" maxlength="20" value="请输入文字.."
onfocus="if (value =='请输入文字..'){value =''}"
onblur="if (value ==''){value='请输入文字..'}" />
<br><br>
textarea:
<textarea cols="50" rows="5" id="textarea" onKeyDown="textdown(event)"
onKeyUp="textup()" onfocus="if(value=='限100字'){value=''}"
onblur="if (value ==''){value='限100字'}">限100字</textarea> <SCRIPT type="text/javascript">
function textdown(e) {
textevent = e;
if (textevent.keyCode == 8) {
return;
}
if (document.getElementById('textarea').value.length >= 100) {
alert("大侠,手下留情,此处限字100")
if (!document.all) {
textevent.preventDefault();
} else {
textevent.returnValue = false;
}
}
}
function textup() {
var s = document.getElementById('textarea').value;
//判断ID为text的文本区域字数是否超过100个
if (s.length > 100) {
document.getElementById('textarea').value = s.substring(0, 100);
}
}
</SCRIPT>

inupt textarea提示文字(点击消失,不输入恢复)及限制字数的更多相关文章

  1. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  2. inupt textarea提示文字(点击消失,不输入恢复)

    <input name="textfield" type="text"  maxlength="20" value="请输入 ...

  3. 设计input搜索框提示文字点击消失的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失

    H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...

  5. input内文字点击消失 弹出层,可以写表单

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. input框内默认文字点击消失

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. ECSHOP搜索框文字点击消失

    <input name="keywords" type="text" id="keyword" value="黄山金银币&q ...

  8. textare限制拖动;提示文字(点击消失,不输入恢复提示信息)

    1.在textarea添加一个样式:style="resize:none;" 2.提示文字(鼠标点击的时候消失,不输入恢复提示信息): <input name="t ...

  9. <textarea>输入框提示文字

    背景 看了过时的资料,花费大把时间,不过也有收获,还是写写吧! 分析 有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题--因为<textarea> ...

随机推荐

  1. block数据类型

    // //  main.m //  04-block数据类型 // //  Created by apple on 14-3-18. //  Copyright (c) 2014年 apple. Al ...

  2. 第8章 委托、Lamdba表达式和事件

    本章内容: 委托    Lambda表达式 事件 8.1.3   简单的委托示例 首先定义一个类MathOperations,它有两个静态方法,对double类型的值执行两个操作. public cl ...

  3. 查看oracle数据库中的保留字

    SQL> select * from v$reserved_words;

  4. TNS-01251: Cannot set trace/log directory under ADR

    试图改变监听日志的名称时,报出TNS-01251错误: $ lsnrctl LSNRCTL - Production on -JUN- :: Copyright (c) , , Oracle. All ...

  5. XCODE中的蓝色文件夹与黄色文件夹

    XCODE中的蓝色文件夹与黄色文件夹 黄色文件夹比较常见 - group , 在XCODE中以文件夹的形式存在,有层次感,但是实际文件在工程下是散乱的,没有层级结构.是XCODE中虚拟目录. 蓝色文件 ...

  6. 用get方式提交请求的url带有中文参数

    又碰到JSP页面中文乱码问题,经过一次encodeURI处理后仍旧是乱码,后来经过两次encodeURI后正常显示中文 以前也碰到过同样的问题,没深究,这次网上搜集了一些资料,记录下来留做备份 ___ ...

  7. sdutoj 2154 Shopping

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2154 Shopping Time Limit: ...

  8. maven的pom报plugins却是的解决方法(转)

    maven的pom报plugins却是的解决方法. 引用 Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom: ...

  9. BackgroundWorker的使用

    一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能.   基本操作: bgw.RunWorkerAsync ...

  10. paper 88:人脸检测和识别的Web服务API

    本文汇总了全球范围内提供基于Web服务的人脸检测和识别的API,便于网络中快速部署和人脸相关的一些应用. 1:从How-old的火爆说起 最开始,网站的开发者只是给一个几百人的群发送email,请他们 ...