效果:

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. SQL Server数据库中还原孤立用户的方法集合

    虽然SQL Server现在搬迁的技术越来越多,自带的方法也越来越高级. 但是我们的SQL Server在搬迁的会出现很多孤立用户,微软没有自动的处理. 因为我们的数据库权限表都不会在应用数据库中,但 ...

  2. 七参数计算正确性验证——Coord软件使用

    我计算了一套七参数,但是别人说计算结果不正确,我只好验证一下. 最后知道为啥算错了,原来是尺度K的单位问题,我计算七参数的单位是PPM,而下面软件的单位是m所以需要除以1000000进行计算. 下面是 ...

  3. hive 的mysql配置

    hive默认使用的是Derby数据库,Derby是一个嵌入式数据库,数据库一般创建在运行hive命令的目录,如果切换目录运行,则找不到数据库 hive mysql配置: 官网地址:https://cw ...

  4. 终于发现为什么SQL没有释放句柄,原来是保存句柄的变量被覆盖了,丢失了原来的句柄

    stmt = xxx ,  stmt = yyy ,  stmt.close() 之前的xxx 没有close掉

  5. https协议

  6. IntelliJ IDEA 下的版本控制介绍

    不管是个人开发或是团队开发,版本控制都是可以很好地被使用的,目前我找不到任何开发者不使用版本控制的理由.而且对于 IDE 来讲,集成版本控制的本身就是它最大的亮点之一,很多开发者也是为此而使用它. 在 ...

  7. Java数组(初学者必看)

    数组无论在哪种编程语言中都算是最重要的数据结构之一,同时不同语言的实现及处理也不尽相同.但凡写过一些程序的人都知道数组的价值及理解数组的重要性,与链表一道,数组成为了基本的数据结构.尽管Java提供了 ...

  8. maven中下载jar包源码和javadoc

    1:Maven命令下载源码和javadocs 当在IDE中使用Maven时如果想要看引用的jar包中类的源码和javadoc需要通过maven命令下载这些源码,然后再进行引入,通过mvn命令能够容易的 ...

  9. Effective C++ 4.设计与声明

    //条款18:让接口容易被正确使用,不易被误用 // 1.如果客户企图使用某个接口而却没有获得他所预期的行为,那么这个代码就不该通过编译. // 2.促进正确使用的方法包括接口的一致性,以及与内置类型 ...

  10. segger 烧写superboot

    选择友善之臂的superboot ,然后才能运行minitool工具进行下载系统,boot->kernel->root   nand flash 启动方式,minitool烧写 bootl ...