利用JS實現:頁面組件的動態顯示、隱藏

來源:互聯網
上載者:User
js|動態|顯示|頁面

<!-- ======= demo.html頁面: ========== -->
<!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" style="display:block">
   <TD><TEXTAREA NAME="area" ROWS="3" COLS="20" maxlength="50" style="behavior:url(maxlength.htc)" 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" style="display:none">
   <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>

 

 文本域的最多文字限制我試用過很多方式,但只有下面這種方式才是最有效,(其它的都不能防止使用者的挎貝粘貼)

<!-- 以下是用來驗證文本域的最大長度限制的htc:命名為maxlength.htc -->

<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>


 

以下為效果圖

點擊“顯示下拉式清單”時的效果


 

 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。