效果:

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. Flask 与 Celery 在 windows 下的集成问题

    Flask 与 Celery 在 windows 下的集成问题 所有的 Web 框架内部的视图中不适合执行需要长时间运行的任务,包括 Flask .Django 等.这类型的任务会阻塞 Web 的响应 ...

  2. 面向对象编程(七)——Static关键字

    Static变量

  3. 注意SQLServer2012中带参数的XP_ReadErrorLog

    --15:26 2014-6-10数据库错误日志通知其中有一部分是检测ERRORLOG中若有用户登录失败信息时,会记录到Errorlog表,并邮件提醒.当时直接从同事那拿过来的脚本(08),按理说版本 ...

  4. Vue.2.0.5-深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...

  5. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  6. throw 子句

    throws是声明方法时抛出可能出现的异常,但不能捕获异常,也就是说并不直接处理异常,而是把它向上传递.其格式如下: 方法声明 throws 异常类名列表 若一个方法声明抛出异常,则表示该方法可能会抛 ...

  7. gcc 错误:Fatal error error writing to tmp No space left on device

    在使用gcc make时报错:Fatal error error writing to tmp No space left on device finiteVolume/ddtSchemes/Eule ...

  8. Winform 窗口拖动

    把窗口边框去掉后,窗口拖动问题: private Point mouseOffset; //记录鼠标指针的坐标 private bool isMouseDown = false; //记录鼠标按键是否 ...

  9. codeforces.com/problemset/problem/213/C

    虽然一开始就觉得从右下角左上角直接dp2次是不行的,后面还是这么写了WA了 两次最大的并不一定是最大的,这个虽然一眼就能看出,第一次可能会影响第二次让第二次太小. 这是原因. 5 4 32 1 18 ...

  10. ibatis学习过程

    ibatis 中map in查询的做法 1:如果传过来的对象就是直接的map数组   list<hashmap<key,value>>的形式  [{1:1},{1:1}}的形式 ...