个性文本框内提示文字打字效果

3个月前 (02-20 11:35)阅读77回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

文本框内的提示文字逐个弹出显示,很像打字弹出效果,带下划线功能,可根据自己需求来自定义。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>个性的文本框内提示文字打字效果_武鸣人</title>
<style type="text/css">
/*全局样式*/
*{padding:0;margin:0;}
a img{border:0;}
body{font-family:"宋体";font-size:12px;color:#000;}
/*全局样式结束*/
#right_b{float:right;width:222px;height:auto;}
.box{color:#FF0000;font-size:14px;}
#message{float:left;width:220px;height:341px;border:1px solid #1e59bb;margin-top:10px;}
.message_title{width:220px;height:28px;margin-bottom:8px;}
.message_title h2{font-weight:bold;color:#FFF;line-height:28px;padding-left:12px;}
#message p{float:left;width:200px;margin:5px 0 0 10px;display:inline;line-height:20px;background:url() repeat-x center bottom;padding-bottom:5px;color:#666;}
#message p.txt_region{background:none;margin-top:15px;}
#message p.txt_region2{background:none;}
#message p a{color:#0058af;text-decoration:none;}
#message p a:hover{color:#ff6600;text-decoration:underline;}
</style>
<script language="javascript">
var max=0;
function textlist()//自己的对象,存储字符串
{
  max=textlist.arguments.length;
  for (i=0; i<max; i++)
   this[i]=textlist.arguments[i];
}
tl=new textlist("请在此处填写您的留言");//实际上是一个多维数组
var x=0;pos=0;var t,m;
var l=tl[0].length;
function che_wuming_ren()
{
  document.form1.textfeld.value=tl[x].substring(0,pos)+"_";
  if(pos++==l)
        {
         pos=0;
          t = setTimeout("che_wuming_ren()",1000);//控制两段话间的转换时间
         x++;
         if(x==max)
          x=0;
          l=tl[x].length;
        } else
  m = setTimeout("che_wuming_ren()",130);//控制文字间的显示时间
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body onload="che_wuming_ren()">
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="body_mian">
  <div id="mian">
    <div id="right">
      <div id="right_b">
        <div id="message">
          <div class="message_title"><h2>填写留言</h2></div>
          <form name="form1" method="get">
            <p class="txt_region"><textarea onfocus="clearTimeout(t);clearTimeout(m);this.value='';" name="textfeld" cols="22" rows="8." class="box" type="text">
</textarea>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


0
0
收藏0
回帖

个性文本框内提示文字打字效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息