javascript之表单元素的新属性
博客专区 > 沉非 的博客 > 博客详情
javascript之表单元素的新属性
沉非 发表于4个月前
javascript之表单元素的新属性
  • 发表于 4个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

传统的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

标签: HTML5表单
共有 人打赏支持
粉丝 0
博文 29
码字总数 21463
×
沉非
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: