文本框的各种效果 第一篇
1，只带下划线的输入框
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title></head><body>只有下划线的输入框<input type="text" name="txt1" size="25" style=" border:1px; border-bottom-style: solid;border-top-style: none;border-left-style:none;border-right-style:none;"><br />默认的输入框 <input id="Text1" size="25" type="text" /></body></html>
?2，文字过长，用省略号代替
<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>无标题页</title><script Language="javascript"> var sText="这是一段很长的文本，希望通过省略号实现";var content;function OmitText(){ content="<nobr>" +sText +"</nobr>"; document.getElementById("mydiv").innerHTML=content;} </script></head><body><input type=button value=加载 onclick="OmitText()"> <DIV STYLE="width: 150px; height: 50px; border: 1px solid black; overflow: hidden; text-overflow:ellipsis" id="mydiv"> </DIV></body></html>?
3，textarea 自适应行数
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title></head><body><textarea rows=1 name=txt1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"></textarea></body></html>
?
4，禁止文本框的拷贝粘贴
<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>标题页</title></head><body><textarea cols=50 rows=5 oncopy="document.selection.empty()" onpaste="return false">测试是否可以拷贝粘贴</textarea></body></html>
?
5，文本框获取汉字
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title></head><body><script language="JavaScript"> function cal(str){ re=/[\u4E00-\u9FA5]/g; //测试中文字符的正则 if(re.test(str)) //使用正则判断是否存在中文 return str.match(re).length //返回中文的个数 else return 0 } </script> <input onblur="alert(cal(this.value))"></body> </body></html>?
6，随意改变大小的文本框
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title></head><body><div contenteditable="true"><input type='text'><button>改变这个本框试验试验</button></div></body></html>
?
7，文本框获取焦点 弹出下拉框
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title></head><body><table border="0" cellpadding="0" cellspacing="0"> <tr> <td>所属区域</td> <td><input type="text" id="txtRegion" /> <div id="divList" style="display: none; border: 1px solid #0000aa; overflow: hidden; height: 150px; position: absolute; background-color: #ccffff;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="overflow: auto; width: 100%; height: 132px; background-color: ##ffffcc;"> <ul><b>中国</b> <ul><b>华北地区</b> <li>北京</li> <li>天津</li> <li>内蒙古</li> <li>河北</li> <li>河南</li> </ul> <ul><b>华东地区</b> <li>上海</li> <li>江西</li> <li>江苏</li> <li>浙江</li> </ul> </ul> </div> </td> </tr> <tr> <td align="right" id="tdClose" style="cursor: hand; background-color: #ff8888;">Close</td> </tr> </table> </div> </td> </tr> </table><script LANGUAGE="JavaScript">var oRegion = document.getElementById("txtRegion"); //需要弹出下拉列表的文本框var oDivList = document.getElementById("divList"); //要弹出的下拉列表var oClose = document.getElementById("tdClose"); //关闭div的单元格，也可使用按钮实现var colOptions = document.getElementsByTagName("li"); //所有列表元素var bNoAdjusted = true;oClose.onclick = function(){ oDivList.style.display = "none"; //隐藏div，实现关闭下拉框的效果};//设置下列选择项的一些事件for (var i=0; i<colOptions.length; i++){ colOptions[i].style.cursor = "hand"; colOptions[i].onclick = function() //为列表项添加单击事件 { oRegion.value = this.innerText; }; colOptions[i].onmouseover = function() //为列表项添加鼠标移动事件 { this.style.backgroundColor = "#ffff00"; }; colOptions[i].onmouseout = function() //为列表项添加鼠标移走事件 { this.style.backgroundColor = ""; };}//文本获得焦点时的事件oRegion.onfocus = function(){ oDivList.style.display = "block"; if (bNoAdjusted) //控制div是否已经显示的变量 { bNoAdjusted = false; //设置下拉列表的宽度和位置 oDivList.style.width = this.offsetWidth + 50; oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight; oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8; }};</script></body></html>?
8，文字的打字效果出现
<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>标题页</title> <script language=javascript>var layers =document.layers;var style=document.all;var both=layers||style;var idme=908601;if(layers){ layerRef='document.layers';styleRef ='';}if(style){ layerRef='document.all';styleRef = '.style';}//开始参数的定义function writeOnText(obj,str){if(layers)with(document[obj]){ document.open();document.write(str);document.close();}if(style)eval(obj+'.innerHTML=str'); }var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本var overMe=0;//逐字显示的方法function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd){var mystr='',strchar='';var skip=200;if (both && idx<=str.length) {if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}mystr = str.slice(0,idx); //返回数组从开始到指定位置的字符串strchar = str.charAt(idx++);//当前地址的字符if (overMe==0 && plysnd==1){//针对浏览器的不同，调用不同的显示方法if (navigator.plugins[0]){if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds[0].stop();setTimeout("document.embeds[0].play(false)",100);}} else if (document.all){ding.Stop();setTimeout("ding.Run()",100);}overMe=1;}else overMe=0;writeOnText(objId, "<span ,"+plysnd+")",delay);}}function init(){txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}</script><BODY onload=init()><DIV class=style1 id=div1></DIV></BODY></html>?
9，滚动的文字
<html><head><title>无标题文档</title><style>div { font-size:12px; }</style></head><body><div id="mydiv" style="width:100%;height:100px;overflow:hidden" onmouseover="iScrollAmount=0"onmouseout="iScrollAmount=1"> 轻轻的我走了，正如我轻轻的来；<br/> 我轻轻的招手，作别西天的云彩。<br/> <br/> 那河畔的金柳，是夕阳中的新娘；<br/> 波光里的艳影，在我心头荡漾。<br/> <br/> 软泥上的青荇，油油的在水底招摇；<br/> 在康河的柔波里，我甘心作一条水草。<br/> <br/> 那榆荫下的一潭，不是清泉是天上的虹；<br/> 揉碎在浮藻间，沉淀彩虹似的梦。<br/> <br/> 寻梦，撑支长篙，向青草更青处漫溯；<br/> 满载一船星辉，在星辉斑烂里放歌。<br/> <br/> 但我不能放歌，悄悄是别离的笙箫；<br/> 夏虫也为我沉默，沉默是今晚的康桥。<br/> <br/> 悄悄的我走了，正如我悄悄的来；<br/> 我挥一挥衣袖，不带走一片云彩。<br/> <br/></div><script language="javascript">var oMarquee = document.getElementById("mydiv"); //滚动对象var iLineHeight = 42; //单行高度，像素var iLineCount = 7; //实际行数var iScrollAmount = 1; //每次滚动高度，像素function play() { oMarquee.scrollTop += iScrollAmount; if ( oMarquee.scrollTop == iLineCount * iLineHeight ) oMarquee.scrollTop = 0; if ( oMarquee.scrollTop % iLineHeight == 0 ) { window.setTimeout( "play()", 2000 ); } else { window.setTimeout( "play()", 50 );}}oMarquee.innerHTML += oMarquee.innerHTML;window.setTimeout( "play()", 2000 ); //定时器用来循环滚动</script></body></html>?
10，文字的滑动效果
<html><head><script type="text/javascript">function $(id) {return document.getElementById(id); //获取控件的ID}function marquee(time, oDiv, oLtd, oRtd) //制作一个marquee类{ /* time 值越大速度越慢 oDiv最外层div oLtd左边的td oRtd右边的td */ var timer, width = oLtd.offsetWidth; function move() { if (oDiv.scrollLeft >= width) //当滚动条移动到最后时，重新开始 oDiv.scrollLeft = 0; else oDiv.scrollLeft ++; //一直滚动 } oRtd.innerHTML = oLtd.innerHTML; //左侧内容转移动到右侧 oDiv.style.overflow = "hidden"; //隐藏最外层div oRtd.style.width = oLtd.offsetWidth; //右侧td的宽度 oDiv.onmouseover = function () { //鼠标移动过来的事件 window.clearInterval(timer); //清空定时器-停止滚动 };oDiv.onmouseout = function () { timer = window.setInterval(move, time); //鼠标移走便开始滚动 }; timer = window.setInterval(move, time); //开始滚动};window.onload = function () {new marquee(25, $("myDiv"), $("myTd1"), $("myTd2"));}</script></head><body><div id="myDiv" style="border:#CCCCCC 1px dashed; width:300px;"><!--设置显示的宽度--> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td id="myTd1"> <table width="342" cellpadding="0" cellspacing="0"><!--注意这里的宽度必须设置，并且要设置为具体值--> <tr align="center"> <td>左边</td> <td>右边</td> <td>左边</td> <td>右边</td> </tr> </table> </td> <td id="myTd2"></td> </tr> </tbody> </table></div></body></html>?
?