网页表单元素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 >

5.只能为中文(有闪动)

<input onkeyup="value=value.replace(/[ -~]/g,'')" >

6.只能为数字(有闪动)

<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

7.只能为数字(无闪动)

<input style="ime-mode:disabled" 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" >

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>

时间: 2024-08-07 05:11:29

网页表单元素Input的高级用法11例的相关文章

推荐个不错的表单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=&qu

网页表单设计中的反馈提示

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://lilong4174.blogbus.com/logs/39063960.html 反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产生影响.在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息输入者他的操作结果.它有很多种形式,包括界面元素.声音.影像变化和物理位移(如震动)等. 我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息,为了加强区分避免歧义,我们这里姑

网页表单输入框设计:精心简化表单输入框

文章描述:简化输入 - 让网页表单更亲切. 大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气. 2. 添加选取器. 与其让

有效网页表单的八条规则

如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了.一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑.明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则. 文章中所有的实例都是用CoffeeCup Web Form Builder生成的. 1. 保守性的搭建, 并带有目的性的设计表单 我们要面对的现实是没有人喜欢花大把的时间填写表单. 保持表单的短小精悍并且剔除绝对不必要的或者不会提供实际收效的表单元素. 保证表单的每个部分都对整体起到了推动

CSS设计符合Web标准的网页表单的几个技巧

本文总结了用div CSS进行网页表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virt

JavaScript获取网页表单action属性的方法

 本文实例讲述了JavaScript获取网页表单action属性的方法.分享给大家供大家参考.具体如下: JavaScript获取网页表单的action属性,即要提交到的url地址,有时候需要提交到当前页面,则可能会设置action为空 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <body> <form id="frm1" action="jb51.php&q

JS定义网页表单提交(submit)的方法

 这篇文章主要介绍了JS定义网页表单提交(submit)的方法,实例分析了javascript实现表单提交执行自定义函数的方法,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS定义网页表单提交(submit)的方法.分享给大家供大家参考.具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 ? 1 2 3 4 5 6 7 8 9 10 <script> function saveInfo() { localStorage.setItem(&q

网页表单有效的八条规则

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了.一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑.明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则.文章中所有的实例都是用CoffeeCup Web Form Builder生成的. 1. 保守性的搭建, 并带有目的性的设计表单 我们要

JS定义网页表单提交(submit)的方法_javascript技巧

本文实例讲述了JS定义网页表单提交(submit)的方法.分享给大家供大家参考.具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 <script> function saveInfo() { localStorage.setItem("name",$("#name").val()); } </script> <form id=register onSubmit="return saveInfo