澳门新浦京8455comhtml5中关于input用法的改变

澳门新浦京8455com,本文实例陈诉了js实现文本框协理加减运算的点子。分享给大家供我们参照他事他说加以考查。具体如下:

测量检验情形:Firefox 10.0、Safari 5.1、Opera 11.61, Chrome 14.0.835.202

那是一个网页表单效果,让表单内的文本框帮助加减运算,然则你要按精确的运算式输入,要不然它从未那么智能哦,譬如输入1+5,文本框旁边会展现计算结果,那要归功于JavaScript的机能。

团结测量试验的时候都有写在form表单里,有付出按键验证。因为对博客使用还不是很内行,发博文的时候独有遗弃submit验证。大家在本土练习的时候能够写上submit验证,看各种浏览器的对那么些新增添的种类验证的不相同。

运作效果截图如下:

一、新扩张的性质和属性值

在HTML5中,大幅地增加与校正了input属性的类型,可以省略的运用那几个属性来兑现从前必要采纳JavaScript工夫落实的。对于html5中新添的input属性帮忙得最多、最完备的是Opera浏览器。

  • ### 1. type属性

    html5中input的type属性增的可取值新扩充二种,对于不帮助那二种新增加值的浏览器会归拢解析为text类型。

    url, email, date, time, datetime, month, week, number, range,
    search, tel, color

    • #### ① url类型

      url类型的input成分是一种极其用来输入url地址的文本框。提交时只要该文本框中的内容不是url地址格式的文字,则不容许提交。

      非url提交时Firefox、Chrome
      提示错误,Opera自动将url框中值转变为url格式,ie9和safari不帮衬,常常提交

    • #### ② email类型

      email类型的input元素是一种非常用来输入email的文本框。提交时一旦该文本框中的内容不是email地址格式的文字则不容许提交,但是它并不检查email地址是还是不是留存,提交时该文本框可以为空,除非加上了 required 属性。
      email类型的文本框具有七个 multiple 属性——它同意在该文本框中输入一串以逗号分割的email地址。当然并不免强必要客户输入该email地址列表。

      Firefox、Chrome、Opera
      非email提交时提示错误,扶持required,ie9和safari不协理,不奇怪提交

    • #### ③ date类型

      date类型的input元素是十分受开采者喜爱的一种因素大家也平时来看网页中必要大家输入的多姿多彩的日期,比如华诞、购买日期、领票日期等。date类型的input成分以日历的花样方便客户输入。当该文本框获取关节时,展现日历,可以在日历总选拔日期实行输入。

      Opera点击弹出四个日历下拉框,但差别意手动输入。Chrome、Safari表现雷同,但Safari在提交时未尝证实,在输入框侧面有上下三个开关,点击加减天,Firefox、ie9不支持

    • #### ④ time类型

      time类型的input成分是一种特意用来输入时间的文本框,而且在付给时会对输入时间的立竿见影实行检讨。它的外观决定于浏览器。

      Opera相像系统的小时设置框。Chrome、Safari表现一致,但Safari在付出时不曾表达,在输入框侧面有内外四个按键,点击加减分钟,Firefox、ie9不支持

    • #### ⑤ datetime类型

      datetime类型的input成分是一种特别用来输入UTC日期和岁月的文本框,并且在交付时会对输入的日期和时间开展实用检查。

      Opera扶助的最佳,很周围date和time的结合。Chrome、Safari表现同样,但Safari在提交时从没证实,在输入框侧边有前后八个按键,点击加减分钟,Firefox、ie9不援助

    • #### ⑥ datetime-local类型

      datetime-local类型的input成分是一种特地用来输入本地日期和岁月的文本框,而且在提交时会对输入的日期和岁月开展实用检查。

      Opera七月datetime展现上的分化正是终极少了个UTC。Chrome、Safari表现同样,但Safari在付给时未尝认证,Firefox、ie9不补助

    • #### ⑦ month类型

      month类型的input成分是一种特意用来输年月份的文本框,而且在提交时会对输入的月份开展实用检查。

      Opera仲春date近似,只是只好接受到月份。Chrome、Safari表现一致,但Safari在付出时未有表明,Firefox、ie9不扶持

    • #### ⑧ week类型

      week类型的input成分是一种特地用来输周号的文本框,并且在付给时会对输入的周号进行中用检查。

      Opera提供下拉接受,不容许手动输入。Chrome、Safari表现一致,但Safari在交付时从没证实,Firefox、ie9不扶持

    • #### ⑨ number类型

      number类型的input成分是一种非常用来输数字的文本框,而且在付出时会对输入的从头到尾的经过是不是为数字。它们具备 minmax 与 step 属性。
      带有数值调整按键,以决定其数值,使之不超过最大值于细微值,同期在点击该数值调控按键时,个中的数值会按step属性进行增减,当然也得以直接在当中输入数字。

      Opera、Chrome、Safari表现相符,但Safari在提交时未尝证实,Firefox、ie9不扶植

    • #### ⑩ range类型

      range类型的input成分是一种只允许输入一段范围内数值的文本框,它具有min属性与max属性,能够设定最小值与最大值(默觉得0与100),它还具备step属性,可以制订每一遍拖动的维度,用滑动条的点子开展值的制定。

      Opera中滑条带刻度、Chrome、Safari不带,Firefox、ie9不帮忙

    • #### ⑾ search类型

      search类型的input成分是一种特别用来输入搜索关键词的文本框的文本框。search类型与text类型仅仅在外观上有却别。在Safari浏览器中,它的外观为操作系统默许的圆角矩形文本框,但以此外观能够用css中央电台表实行改写。在其余浏览器中,TA的外观暂与text类型的文本框外观同样,但能够用css样式表实行改写。(-webkit-appearance:text田野先生)

       

      Safari和Chrome在输入框有内容时会暗中同意在输入框左侧现身一个×

    • #### ⑿ tel类型

      tel类型的input成分被规划为用来输入电话号码的专项使用文本框。它从不特其他校验准则,不强逼输入数字(因为不菲电话号码日常带有其他文字),举个例子86-010-86670831.不过开拓者能够通过 pattern属性来制订对于输入的电话号码格式的注脚。

      Safari和ie不支持

    • #### ⒀ tel类型

      color类型的input成分用来采摘颜色,它提供了一个颜料选拔器。近些日子它只在Opear浏览器与金立浏览器中被帮忙。

      Safari和ie不支持

  • ### 2、require

    概念输入字段的值是还是不是是必须的,可取值true 和 false
    。当使用下列项目时不可能运用:hidden, image, button, submit, reset

    Safari和ie9 不支持

  • ### 3、list

    引用 datalist 元素。假如定义,则一个下拉列表可用以向输入字段插入值。

    Webpage: 

    仅Opera支持

  • ### 4、autocomplete

    autocomplete 属性规定 form 或 input 域应该负有电动完毕效能。

    注明:autocomplete 适用于 form 标签,甚至以下连串的 input
    标签:text, search, url, telephone, email, password, datepickers,
    range 以至 color。

    当客商在自行完毕域中初露输入时,浏览器应该在该域中展现填写的选项:

    First name: 
    Last name: 
    E-mail: 

  • ### 5、autofocus

    可取值:true 和 false

    当页面加载时,使输入字段取得主题。注释:type=”hidden” 时,不能够利用。

    除了ie9 都支持

  • ### 6、multiple

    multiple 属性规定输入域中可筛选四个值。适用于以下项指标 input
    标签:email 和 file。

  • ### 7、pattern

    pattern 属性规定用于表明 input 域的形式(pattern)。情势(pattern)
    是正则表达式。适用于以下连串的 input 标签:text, search, url,
    telephone, email 以致 password。

    Safari、ie9不支持

  • ### 8、palceholder

    placeholder
    属性提供一种提醒(hint),描述输入域所梦想的值。适用于text, search,
    url, telephone, email 以至 password。

    ie9 不支持

  • ### 9、height 和 width 属性

    height 和 width 属性规定用于 image 类型的 input
    标签的图像高度和宽度。只适用于image类型的input

    全支持

在线演示地址如下:

附带提一下、output

在HTML5中,追加了新的成分output。output成分定义分歧品种的输出,比方计算结果或脚本的出口。output成分必得从归属某些表单,也便是说,必得将它书写在表单内部,只怕对它增加form属性。

请输入四个数字 *  = 0

有关form成分上oninput中的text1.value以致text2.value,换到ID.value的样式也足以常常干活,即Text1.value和Text2.value。
output既然具备name属性,可是却不是表单控件,并无法被交付到服务器。

假定你的浏览器是Chrome、Safari、Opera、Firefox在七个输入框中输入数值后就拜会到结果

html5中input不再扶持align、size属性。

切实代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"""html xmlns=""headtitle支持加减运算的文本框/titlemeta "content-type" content="text/html;charset=gb2312"style type="text/css"body{color:#000;font-size:14px;font-family:Verdana,Arial,Helvetica,sans-serif,"宋体";}input{border-style:solid;border-color:#868275;background-color:#f9f9f9;border-width:1px;color:#505050;vertical-align:middle;}/stylescript language=javascriptfunction FloatAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2)) return (arg1*m+arg2*m)/m}function FloatSubtr(arg1,arg2){ return FloatAdd(arg1,-arg2);}function IsMoney(Money){ if(/^[/d|+|.|-]+$/.test(Money)) return true; return false;}function result(){ str=document.getElementById("buy").value; if(!(IsMoney(str))){ document.getElementById("amount").innerHTML ="无效金额"; return false; } var len=str.length,money=0,Num=0; var NumStr="",ctrlflag="x",cflag=0; for(var i=0;ilen; i++){ c= str.charAt(i); if((c=="+")||(c=="-")){ if(i+1len){ if ((str.charAt(i+1)=="+")||(str.charAt(i+1)=="-")) continue; } if((NumStr!="")&&(isNaN(NumStr))){ if(isNaN(NumStr)){ document.getElementById("amount").innerHTML ="输入无效金额"; return false; } } if(NumStr!=""){ //alert("i:"+i+"NumStr:"+NumStr); if ((ctrlflag=="+")||(ctrlflag=="x")){ Num=parseFloat(NumStr); //alert(ctrlflag+"money:"+money+"Num:"+Num); money=FloatAdd(money,Num); NumStr=""; Num=0; ctrlflag=c; } else{ //alert(money+"里面减了"+NumStr); Num=parseFloat(NumStr); money=FloatSubtr(money,Num); NumStr=""; Num=0; ctrlflag=c; } } else{ ctrlflag=c; } continue; } else{ NumStr=NumStr+""+c; } } if((NumStr!="")&&(isNaN(NumStr))){ if (isNaN(NumStr)){ document.getElementById("amount").innerHTML ="无效金额"+NumStr; return false; } } if((ctrlflag=="-")&&(NumStr!="")){ Num=parseFloat(NumStr); money=FloatSubtr(money,Num); } if(((ctrlflag=="+")||(ctrlflag=="x"))&&((NumStr!=""))){ Num=parseFloat(NumStr); money=FloatAdd(money,Num); } document.getElementById("amount").innerHTML =money;}/script/headbody请输入加减计算式:input name="buy" maxlength="30" type="text" onkeyup="javascript:result();"span /span/body/html

指望本文所述对大家的javascript程序设计有着扶植。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图