`
zhangziyueup
  • 浏览: 1196693 次
文章分类
社区版块
存档分类
最新评论

网页表单元素Input的高级用法11例

 
阅读更多


1. 取消按钮按下时的虚线框
input里添加属性值 hideFocus 或者 HideFocus=true
2. 只读文本框内容
input里添加属性值 readonly
3. 防止退后清空的TEXT文档(可把style内容做做为类引用)
<INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput>
4. ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13) event.keyCode=9" >
5. 只能为中文(有闪动)
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13) event.keyCode=9">
6. 只能为数字(有闪动)
<input onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
7. 只能为数字(无闪动)
<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13) event.keyCode=9" onKeyPress="if ((event.keyCode<48 event.keyCode>57)) event.returnValue=false">
8. 只能输入英文和数字(有闪动)
<input onkeyup="value=value.replace(/[/W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
9. 屏蔽输入法
<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13) event.keyCode=9">
10. 只能输入 数字,小数点,减号(- 字符(无闪动)
<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 event.keyCode>57)) event.returnValue=false">
11. 只能输入两位小数,三位小数(有闪动)
<input maxlength=9 onkeyup="if(value.match(/^/d{3}$/)) value=value.replace(value,parseInt(value/10)) ;value=value.replace(//./d*/./g,'.')" onKeyPress="if((event.keyCode<48 event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 value.match(/^/d{3}$/) //./d{3}$/.test(value)) {event.returnValue=false}" id=text_kfxe name=text_kfxe>

分享到:
评论

相关推荐

    JavaScript网页表单元素Input的高级用法

    ### JavaScript网页表单元素Input的高级用法 在Web开发中,`&lt;input&gt;`元素是构建用户交互界面的重要组成部分之一。通过JavaScript可以实现对`&lt;input&gt;`元素的高级操作,从而提升用户体验、增加表单的有效性和安全性。...

    input高级用法input高级用法

    ### Input高级用法详解 #### 一、概述 在网页开发过程中,`input`元素是与用户交互最为频繁的HTML元素之一。通过合理地利用`input`的各种属性和事件,可以实现更为丰富的用户体验和功能。本文将根据提供的部分代码...

    原生js form表单美化插件表单元素input select下拉框

    原生JavaScript作为Web开发的基础,提供了丰富的API和方法来处理表单元素,如input和select。本主题将深入探讨如何使用原生JavaScript对form表单进行美化,并对input输入框和select下拉框进行优化。 一、表单基础 1...

    推荐个不错的表单Input的高级用法11例

    ### 表单Input的高级用法11例详解 #### 1. 取消按钮按下时的虚线框 在Web开发中,当用户点击取消按钮时,有时希望原本聚焦的`&lt;input&gt;`框不再显示聚焦状态下的虚线边框。这种需求可以通过设置`&lt;input&gt;`元素的属性来...

    一个增加表单input的例子/表单框按需求点击增加

    在网页设计中,表单是收集用户数据的重要工具,尤其在处理动态或不确定的数据量时,如报名系统中不确定的报名人数。本示例聚焦于一个动态增加表单输入的解决方案,允许用户根据需求自由添加新的姓名输入框,以适应...

    第10章 表单元素[中]

    本章主要聚焦于"表单元素"这一主题,结合源码分析和工具应用,深入探讨如何有效地创建和管理网页表单。 表单元素通常包括输入框(input)、文本区域(textarea)、下拉菜单(select)、复选框(checkbox)、单选...

    14种CSS3炫酷表单input输入框美化效果

    在现代网页设计中,表单元素的样式设计是至关重要的,因为它们直接影响用户体验。CSS3作为CSS的最新版本,提供了一系列强大的新特性,使得表单输入框(input)的美化变得非常容易且多样化。本资源“14种CSS3炫酷表单...

    Web表单高级技巧

    合理运用标签(label)与输入元素(input)的关联,如使用`&lt;label&gt;`元素或`for`属性,增加可点击区域,提高可用性。 2. **错误提示**:实时验证用户输入,提供明确的错误信息,并指示出具体出错的字段。可以使用...

    jsp中input的高级运用

    本文将详细介绍一些`&lt;input&gt;`标签的高级用法及其与JavaScript结合的应用场景。 #### 1. 隐藏焦点效果 通过设置`hideFocus`属性为`true`,可以在用户点击`&lt;input&gt;`框时隐藏其周围的高亮效果。这通常用于改善用户体验...

    网页设计与制作-1期 单元3HTML高级应用.pdf

    表单元素包括各种输入控件,如文本框 `&lt;input type="text"&gt;`、密码框 `&lt;input type="password"&gt;`、复选框 `&lt;input type="checkbox"&gt;`、单选按钮 `&lt;input type="radio"&gt;`、下拉列表 `&lt;select&gt;`、多行文本框 `...

    HTML5高级网页设计教程

    2. **表单控件增强**:HTML5增加了新的表单元素,如&lt;input type="date"&gt;、&lt;input type="range"&gt;,以及、和等,提供了更丰富的用户输入体验。 3. **Canvas画布**:HTML5的元素允许动态绘制图形,开发者可以利用...

    jquery高级注册表单.zip

    总的来说,《jQuery高级注册表单》这个项目涵盖了前端开发的多个核心领域,通过学习和实践,开发者不仅能掌握jQuery的高级用法,还能深化对HTML5和CSS的理解,提高构建交互性表单的能力。在这个过程中,开发者会学习...

    JS表单验证及CSS的高级用例

    在`chkform()`函数中,开发者会获取表单元素的值并进行判断,如: ```javascript function chkform() { var uname = document.mainform.username.value; if (uname == "") { alert("啊,你的用户名还没有填写呢...

    网页设计与制作-1期 单元3HTML高级应用单元设计.pdf

    学生需要掌握表单的概念和定义方法,包括如何使用不同的表单元素标签,如`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`等。表单元素的应用涵盖文件域(用于上传文件)、隐藏控件(存储不显示给用户的数据)以及表单边框的...

    网页自动填表基础教程从简单开始

    当然,这仅是网页自动操作通用工具强大功能的一部分,实际上还有更多高级的应用场景等待着我们去探索和实践。希望本文能帮助您更好地理解和掌握网页自动填表的基础知识,为您的日常工作带来更多便利。

    JS+CSS实现的一种符合用户体验的网页表单特效

    本例中,通过精心设计的CSS规则,实现了表单元素的动态效果,提高了用户的使用体验。 - **统一元素样式**:定义全局样式以保持页面一致性,例如清除默认边距、设置字体等。 - **特定元素样式**:为表单中的各个元素...

    HTML5+CSS3超酷动态表单

    此外,CSS3的Flexbox布局模型和Grid布局模型也使得表单元素的排列和对齐更加灵活。通过设置`display: flex`或`display: grid`,我们可以轻松实现响应式设计,确保表单在不同设备上都能良好显示。 至于"jiaoben1202...

    Web-前端html+css从入门到精通 128. 表单扩展之新input控件.zip

    在实际应用中,结合JavaScript可以实现更高级的表单验证和交互。例如,使用`pattern`属性定义正则表达式进行复杂验证,或者通过`required`属性设定必填字段。此外,`placeholder`属性用于提供输入提示,`autofocus`...

Global site tag (gtag.js) - Google Analytics