文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0
jquery创建类似于java的map

var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[key]; // Object value = map.get(key); var has = key in map; // boolean has = ......

SuperDabai
今天
0
0
java大数据转换16进制转10进制

public static void main(String[] args) {String hex = "0xdbf3accc683297cf0000";BigInteger amount = new BigInteger(hex.substring(2), 16);System.out.println(amount);......

任梁荣
昨天
2
0
OSChina 周六乱弹 —— 目测我们程序员丁克的几率不大

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @真Skr小机灵鬼儿:8.13分享Jocelyn Pook/Russian Red的单曲《Loving Strangers》 《Loving Strangers》- Jocelyn Pook/Russian Red 手机党少...

小小编辑
昨天
13
3
TypeScript基础入门 - 函数 - 剩余参数

转载 TypeScript基础入门 - 函数 - 剩余参数 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.1 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部