<!-- ======= 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，是Web开发中的重要脚本语言，用于实现客户端的动态效果和交互。在网页设计中，JS能够极大地提升用户体验，让网站变得更加生动有趣。以下将详细讲解利用JavaScript实现的几个关键效果。 1. 斑马...
在IT行业中，页面隐藏菜单栏是一个常见的需求，特别是在设计网页或移动应用时，为了提供更好的用户体验，有时需要根据用户操作或特定场景动态显示或隐藏菜单栏。本篇将围绕这个主题，结合“ben_app”这个压缩包中的...
通过在组件上绑定事件处理函数，可以实现动态更新界面、调用接口等功能。例如，`bindtap`事件用于响应点击，`bindinput`事件则对应输入框内容改变时的处理。 四、数据管理与状态管理 在小程序中，数据的管理通过`...
在网页开发中，表格是一种常见的数据展示和交互元素，而JavaScript（JS）表格组件则为开发者提供了强大的工具，用于创建功能丰富的动态表格。这些组件通常包括但不限于排序、过滤、分页、编辑、列自定义等功能，大大...
当然，你也可以通过 JavaScript 来动态控制这些按钮的显示和隐藏，例如在页面加载完成后或者特定事件触发时执行相应的操作： ```javascript document.getElementById('printButton').style.display = 'none'; ...
它通过JavaScript和CSS来控制对话框的显示、隐藏以及与页面其他元素的交互。 4. **Ajax Enhancements**：LivePipe UI还提供了许多Ajax增强功能，例如无刷新更新内容、进度条显示、Ajax错误处理等。这些功能充分利用...
总结来说，QQ相册JS组件结合了JavaScript的DOM操作、事件处理、动画效果等功能，实现了动态图片展示和用户交互，是网页开发中增强图片展示功能的一个实用工具。开发者可以通过学习和定制这个组件，为自己的网站增添...
JavaScript是网页的动态语言，用于处理用户交互、数据操作和页面更新。在仿饿了么页面中，JavaScript可以实现以下功能： - 动态加载：当用户滚动页面时，通过Ajax请求获取更多商品信息，实现无限滚动效果。 - ...
在Vue.js中实现动态显示与隐藏底部导航是前端开发中常见的需求，这主要涉及到路由配置、组件渲染逻辑以及状态管理等方面的知识。本文将详细阐述如何利用Vue.js的技术栈来实现这一功能，并分析两种常用的方法。 ### ...
另一种是自定义的底部浮层，可以通过在页面底部添加一个组件并控制其显示隐藏状态来实现。例如，在用户点击分享或保存结果时，可以显示一个包含分享按钮的浮层。 开发过程中，`project.config.json`和`project....
在给定的“JS实现鼠标滚动自动隐藏顶部导航菜单特效源码.zip”压缩包中，包含了一个用JavaScript编写的代码示例，该示例演示了如何在用户滚动页面时动态显示或隐藏顶部导航菜单。这种效果常见于许多现代网站设计中，...
JavaScript 实现的 Dialog 对话框是一种常见的前端交互技术，它允许用户在不离开当前页面的情况下与应用程序进行交互。本文将详细介绍如何使用纯 JavaScript 来创建一个功能完备的 Dialog 模块，以及涉及到的相关...
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、轻量级和高效著称。在Vue2.x版本中，开发者可以创建各种自定义组件来满足项目需求，其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息...
在JavaScript（JS）中实现页面气泡效果是一种常见的前端交互设计，可以用于提示信息、通知或者美化用户界面。本文将详细解析如何通过JS来创建这种动态的气泡效果，并结合提供的`qipao.js`文件中的代码进行分析。 ...
"iframe实现页面跳转"这个话题涉及到如何利用iframe来实现在不刷新整个页面的情况下，动态加载不同的网页内容，从而提供更好的用户体验。 首先，iframe的使用方式是在HTML代码中插入`<iframe>`标签，指定其`src`...
在本项目中，我们关注的是一个基于Vue.js技术构建的网页模板，该模板实现了鼠标悬停时动物图像的显示和隐藏动画特效。Vue.js是一种流行的前端JavaScript框架，它以其轻量级、易学易用以及组件化开发的特点，被广泛...
在页面上实现动态加载，通常涉及以下几个步骤： 1. **创建地图服务**：在ArcGIS Server上发布地图服务，这是地图数据提供给Web客户端的基础。服务可以通过ArcGIS Desktop的ArcMap应用程序创建，并通过ArcGIS Server...