利用JS实现：页面组件的动态显示、隐藏

2022-07-15 80酷酷网 80kuku.com

　　js|动态|显示|页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="qiujy">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<TABLE>
<TR id = "toShowTextArea" <TD><TEXTAREA NAME="area" ROWS="3" COLS="20" maxlength="50" onKeyUp="javascript:countCharNum();"></TEXTAREA></TD>
   <TD><font color="red">尚能输入</font>
     <input type="text" name="Limit" size="3" id="Limit" value="50"   maxLength="3" readOnly="true"/><font color="red">个汉字</font>
     </TD>
</TR>
<TR id = "toShowSeletList" <TD><SELECT NAME="test">
     <option value="a">aaaaaaa</option>
     <option value="b">bbbbbbb</option>
     <option value="c">ccccccc</option>
<option value="d">ddddddd</option>
    </SELECT></TD>
   <TD>请选择</TD>
</TR>
<TR>
   <TD colspan="2"><INPUT TYPE="button" name="but1" value="显示文本域" >
   <INPUT TYPE="button" name="but2" value="显示下拉列表" ></TD>
</TR>
</TABLE>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showTextArea(){
        toShowTextArea.style.display="block";
toShowSeletList.style.display="none";
    }
    function showSelectList(){
toShowTextArea.style.display="none";
        toShowSeletList.style.display="block";
    }

function countCharNum(){
Limit.value = 50 - area.value.length;
}
//-->
</SCRIPT>

文本域的最多文字限制我试用过很多方式，但只有下面这种方式才是最有效的，（其它的都不能防止用户的挎贝粘贴）

<PUBLIC:COMPONENT id="bhvMaxlength" urn="maf:Maxlength">
<PUBLIC:PROPERTY name="maxLength" />
<PUBLIC:ATTACH event="onkeypress" handler="doKeypress" />
<PUBLIC:ATTACH event="onkeydown" handler="doKeydown" />
<PUBLIC:ATTACH event="onbeforepaste" handler="doBeforePaste" />
<PUBLIC:ATTACH event="onpaste" handler="doPaste" />
<PUBLIC:ATTACH event="oncontentready" handler="init" />

<SCRIPT language="JScript">
//用来限制文本域最大长度的JS
function doKeypress()
{
if(!isNaN(maxLength))
{
maxLength = parseInt(maxLength)
var oTR = element.document.selection.createRange()
if(oTR.text.length >= 1)
event.returnValue = true
else if(value.length > maxLength-1)
event.returnValue = false
}
}

function doKeydown()
{
setTimeout(function()
{
maxLength = parseInt(maxLength)
if(!isNaN(maxLength))
{
   if(element.value.length > maxLength-1)
   {
    var oTR = window.document.selection.createRange()
    oTR.moveStart("character", -1*(element.value.length-maxLength))
    oTR.text = ""
   }
}
},1)
}

function doBeforePaste()
{
if(!isNaN(maxLength))
event.returnValue = false
}

function doPaste()
{
if(!isNaN(maxLength))
{
event.returnValue = false
maxLength = parseInt(maxLength)
var oTR = element.document.selection.createRange()
var iInsertLength = maxLength - value.length + oTR.text.length
var sData = window.clipboardData.getData("Text").substr(0, iInsertLength)
oTR.text = sData;
}
}

function init()
{
maxLength = parseInt(maxLength)
if(!isNaN(maxLength))
{
element.value = element.value.substr(0, maxLength)
}
}
</SCRIPT>

</PUBLIC:COMPONENT>

以下为效果图

点击“显示下拉列表”时的效果