文档章节

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
HTML 交互式表单验证

表单在 HTML 中总是略显复杂的,首先你需要写正确的标记,然后确保每个表单项在提交前有正确的值,最后还需要在有问题时提醒告知用户。幸运的是,HTML 5 的新特征让这一切变得容易,特别是表...

oschina
2016/12/16
2.7K
2
jQuery验证框架(五)验证器 (jQuery validation)

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

打杂
2010/11/16
0
1

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
3
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
6
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
6
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
5
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部