<!-- ======= 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 模块,以及涉及到的相关...
在JavaScript(JS)中实现页面气泡效果是一种常见的前端交互设计,可以用于提示信息、通知或者美化用户界面。本文将详细解析如何通过JS来创建这种动态的气泡效果,并结合提供的`qipao.js`文件中的代码进行分析。 ...
"iframe实现页面跳转"这个话题涉及到如何利用iframe来实现在不刷新整个页面的情况下,动态加载不同的网页内容,从而提供更好的用户体验。 首先,iframe的使用方式是在HTML代码中插入`<iframe>`标签,指定其`src`...
Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、轻量级和高效著称。在Vue2.x版本中,开发者可以创建各种自定义组件来满足项目需求,其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息...
在本项目中,我们关注的是一个基于Vue.js技术构建的网页模板,该模板实现了鼠标悬停时动物图像的显示和隐藏动画特效。Vue.js是一种流行的前端JavaScript框架,它以其轻量级、易学易用以及组件化开发的特点,被广泛...
在页面上实现动态加载,通常涉及以下几个步骤: 1. **创建地图服务**:在ArcGIS Server上发布地图服务,这是地图数据提供给Web客户端的基础。服务可以通过ArcGIS Desktop的ArcMap应用程序创建,并通过ArcGIS Server...