效果:

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. 如何禁止DELETE、PUT、OPTIONS、TRACE、HEAD等协议访问应用程序 .

    原文:http://linder.iteye.com/blog/735435   简介 WebDAV (Web-based Distributed Authoring and Versioning)是 ...

  2. “双十一”购物狂欢节,电商运营和商业智能(BI)才是绝配

         百年前,人们获取信息的方式是通过报纸.书籍:十年前,人们获取信息的方式是通过传统PC互联网:而如今,在4G网络高速发展的浪潮下,伴随着移动智能终端的普及,人们获取信息的方式已经逐渐转向了移动 ...

  3. Intellij IDEA 创建控制台项目,断点调试

    在idea 2016中创建一个控制台项目(经常会忘) 打开创建界面 注意,什么都不要选,点击next(最坑的地方,经常忘) 再次点击next ============================= ...

  4. iOS截图

    1.普通的截图办法,在View上面截图 /** * 截图代码 * * @param view 需要截图的view * @param rect 需要截取的区域 * * @return 返回截取的对象 * ...

  5. Array.prototype.slice && Array.prototype.splice 用法阐述

    目的 对于这两个数组操作接口,由于不理解, 往往被误用, 或者不知道如何使用.本文尝试给出容易理解的阐述. 数组 什么是数组? 数组是一个基本的数据结构, 是一个在内存中依照线性方式组织元素的方式, ...

  6. ios9 升级后 企业版app plist无法安装

    昨天apple推送了ios9, 公司的一些app是企业版的,平常通过 item-service 结果更改如下 plist可以了 itms-services://?action=download-man ...

  7. nc:a test cmd for TCP HTTP

    docker 上需要nc 测试环境--internet上搜集了一些资料 ---------------------------------------------------------------- ...

  8. 评估指标:准确率(Precision)、召回率(Recall)以及F值(F-Measure)

    为了能够更好的评价IR系统的性能,IR有一套完整的评价体系,通过评价体系可以了解不同信息系统的优劣,不同检索模型的特点,不同因素对信息检索的影响,从而对信息检索进一步优化. 由于IR的目标是在较短时间 ...

  9. 阶乘之和 & 程序运行时间 & 算法分析

    实例:输入n,计算S = 1! + 2! + 3! + 4! + ... + n!的末六位(不含前导0).其中 n ≤ 106. 分析:考虑到数据溢出后程序如下: #include <stdio ...

  10. PostgreSQL Partitions

    why we need partitions The first and most demanding reason to use partitions in a database is to inc ...