文本框的各种效果第一篇

最新推荐文章于 2022-04-10 00:18:12 发布

iteye_8463

最新推荐文章于 2022-04-10 00:18:12 发布

阅读量200

点赞数

分类专栏： javascript 文章标签：页面文字的打字滚动滑动获取汉字限制字数等效果

本文链接：https://blog.csdn.net/iteye_8463/article/details/82406925

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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=加载 οnclick="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 οncοpy="document.selection.empty()"  οnpaste="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 οnblur="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 οnlοad=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" οnmοuseοver="iScrollAmount=0"
οnmοuseοut="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>

iteye_8463

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框的各种效果第一篇

1，只带下划线的输入框&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;&lt;head&gt;&lt;title&gt;标题页&lt;/title&gt;&lt;/head&gt;&lt;body&gt;只有下划线的输入框&lt;input type="text" name="tx
复制链接

扫一扫