文本框的各种效果第一篇

海上明月共潮生--风铃

浏览: 60502 次
性别:

最近访客更多访客>>

bisgoon

袁仕勇

lcyncchn

huangqiansen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

页面文字的打字滚动滑动获取汉字限制字数等效果

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 class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+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>

分享到：

我的学习历程 | iframe 高度自适应

2012-09-05 13:26
浏览 1378
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

文本框的各种效果第一篇

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

文本框的各种效果 第一篇

评论

发表评论

相关推荐

js ，jQuery图片浏览器

js 操作浏览器的各种功能

js实现网页文本编辑器

js 网页 实现 黑客帝国中的字符下落效果 立体动态文字旋转效果

google_eye 的js实现

iframe 高度自适应

js 操作图片的各种效果 第三篇

js 操作图片的各种效果 第二篇

js 操作图片的各种效果 第一篇

js css 操作的table各种效果 第二篇

js css 操作的table各种效果 第一篇

jQuery 标签页

jQuery 可编辑的表格

js iframe 打印 打印预览 页眉页脚的设置

js简单地测距实现

最近访客更多访客>>

文本框的各种效果第一篇

js 网页实现黑客帝国中的字符下落效果立体动态文字旋转效果

js 操作图片的各种效果第三篇

js 操作图片的各种效果第二篇

js 操作图片的各种效果第一篇

js css 操作的table各种效果第二篇

js css 操作的table各种效果第一篇

js iframe 打印打印预览页眉页脚的设置