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

网页表单元素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的高级用法

    网页设计与制作-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;`、多行文本框 `...

    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;`等。表单元素的应用涵盖文件域(用于上传文件)、隐藏控件(存储不显示给用户的数据)以及表单边框的...

    jquery表单验证

    使用Validform的高级用法可以通过配置参数实现,例如: ```javascript $(".demoform").Validform({ btnSubmit: ".btn_sub", tiptype: 2, postonce: true, ajaxurl: "ajax_post.php", callback: function(data)...

    CSS的本用法、设置表格与表单的样式

    CSS控制网页元素的布局、颜色、字体、大小等多种视觉效果,使网页内容更加美观和易读。 在学习CSS时,了解其基本用法至关重要。以下是一些关键概念和技巧: 1. **CSS选择器**: - **标记选择器**:通过HTML标记名...

    HTML网页设计.pptx

    表单元素还可以设置默认选中、禁用等状态,以适应不同的交互需求。 03 PART 03: 层叠样式表CSS CSS(Cascading Style Sheets)用于定义HTML元素的样式,包括颜色、字体、布局等。HTML选择器允许我们根据元素的类型...

    CGI程序与FORM表单交互的实现1

    - HTML表单的编制应清晰明了,包括表单元素(如文本框、复选框、单选按钮等)的定义,以及提交按钮的设置。 - 表单的`method`属性决定了数据的提交方式(GET或POST),`action`属性指定了CGI程序的位置。 - CGI程序...

    《网页设计》复习题.docx

    2. 行为可以绑定到HTML元素上,如连接、图像、表单元素,但不能绑定到文本、标签和高级形式,这里的“高级”可能指的是复杂的结构或特定的DOM节点。 3. 按功能划分,HTML中的按钮分为提交按钮、重置按钮和普通按钮...

    全面解析Bootstrap表单使用方法(表单样式)

    3. 4px圆角,使表单元素看起来更柔和。 4. 设置阴影效果,聚焦时边框和阴影有动态变化,提供更好的用户体验。 5. `placeholder`文本颜色为#999,方便用户理解输入框的预期内容。 二、水平表单 Bootstrap默认的表单...

    HTML(超文本标记语言)网页设计

    - 表单`&lt;form&gt;`元素用于用户输入,如`&lt;input&gt;`(文本框)、`&lt;select&gt;`(下拉菜单)和`&lt;textarea&gt;`(多行文本输入)。 - 通过`&lt;button&gt;`元素和`&lt;input type="submit"&gt;`进行提交操作,`&lt;label&gt;`标签与输入元素关联,...

    【ASP.NET编程知识】asp.net core标签助手的高级用法TagHelper+Form.docx

    在本文档中,作者主要介绍了TagHelper在处理表单时的高级用法。传统的ASP.NET MVC开发中,我们通常使用`@Html.BeginForm`等辅助方法来创建表单,并结合`@Html.TextBoxFor`、`@Html.LabelFor`等方法来生成与Model绑定...

    第6讲:MUI-HTML5前端框架MUI - dialog对话框、ipnut (表单).pdf

    MUI是一款专为移动设备...总结,MUI提供了丰富多样的对话框和表单元素,通过简单的配置和调用,开发者可以快速构建具有高级交互特性的移动应用界面。理解并熟练运用这些组件,能大大提高开发效率,同时提升用户体验。

    《HTML5网页前端设计》教学大纲.docx

    在表单和媒体方面,课程会讲解HTML5新增的表单输入类型和元素标签,如`&lt;input type="date"&gt;`、`&lt;output&gt;`等,以及表单验证和提交的相关属性。同时,HTML5对音频和视频的支持也是一大改进,学生将学习如何嵌入和控制...

    高级前端工程师面试题整理1

    - (5) 表单控件增强,如`&lt;input type="date"&gt;`、`&lt;input type="email"&gt;`等; - (6) 新技术如Web Worker、WebSocket和Geolocation。 移除的元素包括`&lt;acronym&gt;`、`&lt;applet&gt;`、`&lt;basefont&gt;`等。 2. HTML5新标签的...

    1-2_网页设计和布局.pdf

    例如,`&lt;canvas&gt;`元素用于图形绘制,`&lt;video&gt;`和`&lt;audio&gt;`支持多媒体播放,`&lt;input type="date"&gt;`等新的输入类型简化了表单验证,离线存储(`localStorage`和`sessionStorage`)允许在本地保存数据,地理定位API提供...

    动态网页技术

    动态网页技术是现代互联网应用的核心组成部分,它与传统的静态网页技术相比,提供了更高级的功能和交互性。动态网页技术主要包括JSP(Java Server Pages)和ASP(Active Server Pages),这两种技术都允许开发者创建...

Global site tag (gtag.js) - Google Analytics