但是不建议使用name去获得特定的表单,下面分别

时间:2020-05-04 04:43来源:美高梅游戏网站
最近忙得不可开交,都没时间更新了,年底了嘛,为了冲KPI,公司的活动项目一个接一个呀,为了年底有个好收成,希望奖金多多啊。近期活动大都跟表单挂钩,不管是PC端还是移动端

最近忙得不可开交,都没时间更新了,年底了嘛,为了冲KPI,公司的活动项目一个接一个呀,为了年底有个好收成,希望奖金多多啊。近期活动大都跟表单挂钩,不管是PC端还是移动端,做多了,想总结点心得,今天谈谈表单中input输入框的一些常用状态。

value

如果用的是value,我们想鼠标focus后默认文字消失,移开后默认文字又重现,可以这样来写。

<input type="text" value="请输入手机号" class="inp-fon">

$(".inp-fon").focus(function(){
          var oldValue = $(this).val();
          if(oldValue == this.defaultValue){
              $(this).val("").addClass('focus-fon');
          }
      }).blur(function(){
          var oldValue = $(this).val();
          if(oldValue == ""){
               $(this).val(this.defaultValue).removeClass('focus-fon');;
          }
      });

请看下图演示:
默认状态:

美高梅手机游戏网站 1

QQ截图20151230151150.jpg

focus状态

美高梅手机游戏网站 2

QQ截图20151230153438.jpg

说明:默认状态是灰色的,然后focus后,输入的字体会变成黑色的,上面的JS里就是通过添加和删除样式“focus-fon”来控制的。

FormElement

由于HTML5的出现,使得表单的功能更加强大,input的功能应用起来更加简单,从value到placeholder。但是由于兼容问题,placeholder只适合在移动端的项目,IE6/7/8不支持,只能用value,或者你可以用其他方法模拟placeholder,具体案例你可以看支付宝和财付通的登录和注册页面。下面分别介绍下value和placeholder的实际应用。

placeholder

如果用的是placeholder,我们就不需要JS了,因为它本身就自带focus和blur功能了。但是有时候设计师给我们的设计稿往往跟默认文字颜色是有区别的,那我们如何改变placeholder默认文字颜色呢,如下:

<input type="text" placeholder="请输入手机号" class="inp-fon">

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

手机美高梅游戏网址 ,一般都是用以上这种方法来处理,这里就不放demo了,比较简单,如果想看效果,把代码复制到网页里查看。

target 用于发送和接收响应的窗口名称

value

length 用于表示表单控件的数量

如果用的是value,我们想鼠标focus后默认文字消失,移开后默认文字又重现,可以这样来写。

Form标签的target属性-----无刷新表单提交

$.focus{varoldValue=$;if(oldValue==this.defaultValue){$.val.addClass;}}).blur{varoldValue=$;if(oldValue==""){$.val.removeClass;;}});

document.forms获取页面中所有的form元素,可以通过数值索引或name值取得,但是不建议使用name去获得特定的表单,一是容易出错,而是将来的浏览器可能会不支持。也就是所谓的向后兼容。

说明:默认状态是灰色的,然后focus后,输入的字体会变成黑色的,上面的JS里就是通过添加和删除样式“focus-fon”来控制的。

elements属性,该属性是表单中所有表单元素的集合。是一个有序列表,可以通过数值索引或name取得。当几个元素使用同一个name,通过name获取到一个NodeList。

placeholder

美高梅手机游戏网站 ,点击即可提交表单的三种元素

如果用的是placeholder,我们就不需要JS了,因为它本身就自带focus和blur功能了。但是有时候设计师给我们的设计稿往往跟默认文字颜色是有区别的,那我们如何改变placeholder默认文字颜色呢,如下:

• input type=submit

:-moz-placeholder{/*MozillaFirefox4to18*/color:#f00;}::-moz-placeholder{/*MozillaFirefox19+*/color:#f00;}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#f00;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#f00;}

• button type=submit

一般都是用以上这种方法来处理,这里就不放demo了,比较简单,如果想看效果,把代码复制到网页里查看。

• input type=image

这也是我近期的一点心得而已,至于上面提到的支付宝和财付通的登录和注册页面的效果,以后有时间再说吧。如您有好的方法,恳请留言给我。

• 只要表单中存在上面列出的任何一种按钮,那么在相应表单控件拥有焦点的情况下,按回车键就可以提交该表单

• 以这种方式提交表单时,浏览器会在讲请求发送给服务器前出发submit事件。阻止这个事件的默认行为就可以取消表单提交。在这之前我们可以验证表单数据,来决定是否允许表单提交。

重复提交表单问题

• 第一次提交后禁用表单按钮

• 利用onsubmit事件处理程序取消后续的表单提交操作

表单字段

属性

• form 指向当前字段所属表单的指针

• type 当前字段的类型 可以动态修改该字段 改变input的类型

• value 当前字段将被提交给服务器的值

方法

• focus() 聚焦于该元素 但是当元素hidden或者不可见时会发生错误

编辑:美高梅游戏网站 本文来源:但是不建议使用name去获得特定的表单,下面分别

关键词: