javascript之表單元素的新屬性

傳統的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事件；

做用：一、提供了更大強大的功能，方便了咱們的開發；

        二、在移動端使用對應的input類型，當用戶輸入的時候能夠調取出對應的虛擬鍵盤，方便用戶快速輸入(這個是H5表單新類型的最核心的做用)

        三、相對於傳統的表單提供了更強大的表單驗證：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