文档章节

javascript之表单元素的新属性

 沉非
发布于 2017/09/04 22:31
字数 454
阅读 18
收藏 0

传统的INPUT的表单类型:text、password、submit、reset、button、radio、checkbox、file、hidden...

HTML5中新增加了一些类型:search、url、email、tel、number、range、color、data、time、dataTime...

pc端传统表单元素常用的事件:click、change、focus、blur、keydown、keyup...

移动端表单元素的事件:在移动端没有keydown、keyup事件(很少有的),因为移动端使用的键盘是虚拟的键盘;移动端多了一个事件类型:input事件;

作用:1、提供了更大强大的功能,方便了我们的开发;

        2、在移动端使用对应的input类型,当用户输入的时候可以调取出对应的虚拟键盘,方便用户快速输入(这个是H5表单新类型的最核心的作用)

        3、相对于传统的表单提供了更强大的表单验证:JS中新提供的是input.checkValidity()方法

            css3中提供的是input:valid / input:invalid

    HTML5除了给input新增加类型外,还增加一个常用的属性:placeholder,用来给文本框设置默认提示信息的,但是在IE浏览器中支持的不是特别好

    HTML5还提供了一些新的表单元素:datalist、progress...

 

 

上传文件:

var file = document.getElementById("companylogo").files[0]//获取文件对象赋值
if (typeof FileReader == "undefined") {
  alert("您的浏览器不支持FileReader!")
}
var fReader = new FileReader();
//ml5新对象
fReader.onload = function (e) {//图片存储完毕
  document.getElementById("companyimg").src = e.target.result;//图片预览
  _this.savepicture = e.target.result//获取base64图片字符串
  var requestNumber = Math.ceil(_this.savepicture.length / 4000)//获取请求总次数
  console.log("请求总次数" + requestNumber)//请求总次数
  if (_this.savepicture.length < 4000) {//字符串长度小于4000
    _this.uploadpictures(0)//is_page 为0 请求一次
  } else {
    _this.uploadpictures(requestNumber)//请求多次  把次数传给交互
  }
}
fReader.readAsDataURL(file);

关于表单上传文件的文章链接:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 32
码字总数 24934
作品 0
海淀
程序员
私信 提问
JavaScript 学习(1)

参考资料:http://www.w3school.com.cn/js/index.asp 额,发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些... 一、教程 js是一种轻量级的编程语言,可插入html页面中,并由...

明天以后
2014/09/30
0
0
jQuery验证框架(一) 可选项 (jQuery validation)

jQuery验证框架 Html代码 <script type="text/javascript" src=js/jquery-1.3.2.min.js></script> <script type="text/javascript" src=js/jquery.validate.pack.js></script> <script type......

打杂
2010/11/16
0
5
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
jQuery验证框架(五)验证器 (jQuery validation)

jQuery验证框架 五、验证器( Validator ) validate方法返回的验证器对象( Validator Object) 有一些公用的方法。你可以用来触发验证程序或改变表单(form)的内容。验证器对象有更多的方法,不...

打杂
2010/11/16
0
1
jQuery验证框架(二)插件方法 (jQuery validation)

jQuery验证框架 二、插件方法( Plugin methods ) [1] validate( [options] ) 返回:Validator 说明:见第一部分 [2] valid() 返回:Boolean 说明:检查表单是否已通过验证。 Js代码 $("#myfo...

打杂
2010/11/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
31分钟前
1
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
1
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
1
0
单例模式

单例模式(Singleton pattern)属于创建型设计模式。 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化多个对...

NinjaFrog
昨天
1
0
TypeScript基础入门之装饰器(三)

转载 TypeScript基础入门之装饰器(三) 继续上篇文章[TypeScript基础入门之装饰器(二)] 访问器装饰器 Accessor Decorator在访问器声明之前声明。 访问器装饰器应用于访问器的属性描述符,可用...

durban
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部