效果:

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. 你应该知道的2016年有关App开发的技术创新

    上一篇简述了2016年有关App产品的年中总结,这篇开始历数有关App开发的技术创新!无论你是创业者,还是程序员,无论你是否懂编程.写代码,利用APICloud平台数据撰写的年中总结,集合了移动应用创 ...

  2. wordpress 天气插件开发

    <?php /* * author by:wordpress教程网(http://www.wpnoob.cn) * url: * */ class weatherWidget extends W ...

  3. Vue.2.0.5-Vue 实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...

  4. max-min fairness 最大最小公平算法

    我们经常面临给一组用户划分稀有资源的问题,他们都享有等价的权利来获取资源,但是其中一些用户实际上只需要比其他用户少的资源.那么我们如何来分配资源呢?一种在实际中广泛使用的分享技术称作“最大最小公平分享 ...

  5. Groupon面经Prepare: Max Cycle Length

    题目是遇到偶数/2,遇到奇数 *3 + 1的题目,然后找一个range内所有数字的max cycle length.对于一个数字,比如说44,按照题目的公式不停计算,过程是 44, 22, 11, 8 ...

  6. CentOS 7 自动更新时间日期

    # ntpdate time.nist.gov 或 # rdate -s time.nist.gov 下列服务器可用 time-nw.nist.gov

  7. [原创]java WEB学习笔记76:Hibernate学习之路---Hibernate介绍,hibernate 环境的搭建

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. 使用javabeen的好处

    什么是javabeen? javaBean在MVC设计模型中是model,又称模型层, 在一般的程序中,我们称它为数据层, 就是用来设置数据的属性和一些行为,然后提供获取属性和设置属性的get/set ...

  9. java将数组中的零放到末尾

    package com.shb.java; /** * 将数组中的0放到数组的后边,然后原来的非零数的顺序不改变 * @author BIN * */ public class Demo2{ publ ...

  10. JAVA面试题之实现字符串的倒序输出

    package shb.java.demo; public class MyTest { public static void main(String[] args) { String string ...