`

利用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="显示文本域" onclick="javascript:showTextArea();">
   <INPUT TYPE="button" name="but2" value="显示下拉列表" onclick="javascript:showSelectList();"></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>

 

以下为效果图

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


 
分享到:
评论

相关推荐

    微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    通过`onPageScroll`事件,我们可以监听到页面的滚动情况,并根据滚动的距离来动态调整`hidden`的值,从而实现组件的显示和隐藏。 这种方法的核心在于,通过监听页面的滚动事件`onPageScroll`,并在回调函数中根据...

    前端:轮播图和显示隐藏遮罩制作

    为了实现更复杂的功能,例如自动轮播、过渡动画和触屏滑动等,可以引入JavaScript库,如Bootstrap的Carousel组件或者自己编写JavaScript代码。同时,对于响应式设计,需要根据不同的屏幕尺寸调整轮播图和遮罩的样式...

    值得分享的JavaScript实现图片轮播组件

    JavaScript 实现图片轮播组件是一种常见的网页动态效果,它可以优雅地展示一组图片并提供用户交互。本篇文章将详细解析如何使用 JavaScript 来构建一个具备基本功能的图片轮播组件。 首先,我们需要理解轮播组件的...

    利用js实现几个效果

    JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的动态效果和交互。在网页设计中,JS能够极大地提升用户体验,让网站变得更加生动有趣。以下将详细讲解利用JavaScript实现的几个关键效果。 1. 斑马...

    页面隐藏菜单栏

    在IT行业中,页面隐藏菜单栏是一个常见的需求,特别是在设计网页或移动应用时,为了提供更好的用户体验,有时需要根据用户操作或特定场景动态显示或隐藏菜单栏。本篇将围绕这个主题,结合“ben_app”这个压缩包中的...

    微信小程序demo:组件练习!实现大量基础功能

    通过在组件上绑定事件处理函数,可以实现动态更新界面、调用接口等功能。例如,`bindtap`事件用于响应点击,`bindinput`事件则对应输入框内容改变时的处理。 四、数据管理与状态管理 在小程序中,数据的管理通过`...

    js表格组件js表格组件

    在网页开发中,表格是一种常见的数据展示和交互元素,而JavaScript(JS)表格组件则为开发者提供了强大的工具,用于创建功能丰富的动态表格。这些组件通常包括但不限于排序、过滤、分页、编辑、列自定义等功能,大大...

    pdf.js使用demo(已解决隐藏打印下载等按钮)

    当然,你也可以通过 JavaScript 来动态控制这些按钮的显示和隐藏,例如在页面加载完成后或者特定事件触发时执行相应的操作: ```javascript document.getElementById('printButton').style.display = 'none'; ...

    Prototype.js的用户界面组件_JavaScript_下载.zip

    它通过JavaScript和CSS来控制对话框的显示、隐藏以及与页面其他元素的交互。 4. **Ajax Enhancements**:LivePipe UI还提供了许多Ajax增强功能,例如无刷新更新内容、进度条显示、Ajax错误处理等。这些功能充分利用...

    QQ相册js组件,实现图片轮流展示

    总结来说,QQ相册JS组件结合了JavaScript的DOM操作、事件处理、动画效果等功能,实现了动态图片展示和用户交互,是网页开发中增强图片展示功能的一个实用工具。开发者可以通过学习和定制这个组件,为自己的网站增添...

    html+css+js+vue实现静态的仿饿了么页面

    JavaScript是网页的动态语言,用于处理用户交互、数据操作和页面更新。在仿饿了么页面中,JavaScript可以实现以下功能: - 动态加载:当用户滚动页面时,通过Ajax请求获取更多商品信息,实现无限滚动效果。 - ...

    vue实现动态显示与隐藏底部导航的方法分析

    在Vue.js中实现动态显示与隐藏底部导航是前端开发中常见的需求,这主要涉及到路由配置、组件渲染逻辑以及状态管理等方面的知识。本文将详细阐述如何利用Vue.js的技术栈来实现这一功能,并分析两种常用的方法。 ### ...

    微信小程序的刻度尺组件开发,体重计算,页面显示,底部弹窗两种用法

    另一种是自定义的底部浮层,可以通过在页面底部添加一个组件并控制其显示隐藏状态来实现。例如,在用户点击分享或保存结果时,可以显示一个包含分享按钮的浮层。 开发过程中,`project.config.json`和`project....

    JS实现鼠标滚动自动隐藏顶部导航菜单特效源码.zip

    在给定的“JS实现鼠标滚动自动隐藏顶部导航菜单特效源码.zip”压缩包中,包含了一个用JavaScript编写的代码示例,该示例演示了如何在用户滚动页面时动态显示或隐藏顶部导航菜单。这种效果常见于许多现代网站设计中,...

    js实现的dialog

    JavaScript 实现的 Dialog 对话框是一种常见的前端交互技术,它允许用户在不离开当前页面的情况下与应用程序进行交互。本文将详细介绍如何使用纯 JavaScript 来创建一个功能完备的 Dialog 模块,以及涉及到的相关...

    JS 实现页面气泡效果

    在JavaScript(JS)中实现页面气泡效果是一种常见的前端交互设计,可以用于提示信息、通知或者美化用户界面。本文将详细解析如何通过JS来创建这种动态的气泡效果,并结合提供的`qipao.js`文件中的代码进行分析。 ...

    iframe 实现页面跳转 动态改变主题

    "iframe实现页面跳转"这个话题涉及到如何利用iframe来实现在不刷新整个页面的情况下,动态加载不同的网页内容,从而提供更好的用户体验。 首先,iframe的使用方式是在HTML代码中插入`&lt;iframe&gt;`标签,指定其`src`...

    一个Vue2x的tooltip提示信息组件

    Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、轻量级和高效著称。在Vue2.x版本中,开发者可以创建各种自定义组件来满足项目需求,其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息...

    网页模板——基于vuejs实现鼠标悬停动物显示和隐藏动画特效.zip

    在本项目中,我们关注的是一个基于Vue.js技术构建的网页模板,该模板实现了鼠标悬停时动物图像的显示和隐藏动画特效。Vue.js是一种流行的前端JavaScript框架,它以其轻量级、易学易用以及组件化开发的特点,被广泛...

    arcgis server 9.2代码阅读笔记二:在页面上动态加载图层

    在页面上实现动态加载,通常涉及以下几个步骤: 1. **创建地图服务**:在ArcGIS Server上发布地图服务,这是地图数据提供给Web客户端的基础。服务可以通过ArcGIS Desktop的ArcMap应用程序创建,并通过ArcGIS Server...

Global site tag (gtag.js) - Google Analytics