關於input,textarea

  碎碎念——

        今天開發時碰見了一個以前踩過的坑，可是忘記怎麼解決了，感受很悲傷，又去查查以後才搞定，有點浪費時間，畢竟天天忙的跟個小陀螺同樣。準備常常隨手記一點，養成個好習慣,話說以前也記了好多東西，不過都是記在筆記本上，喜歡紙和筆的感受，做爲一個碼農，估計是有點格格不入了，筆記本不能隨身攜帶，何況個人仍是加大版的乃種，之後仍是轉移陣地記在電腦上吧。

  正文——

1.textarea的placeholder死活沒有用，顯示不出來。

  正確寫法：<textarea id="msg" placeholder="請輸入備註消息"></textarea>

  錯誤寫法：

•   <textarea id="msg" placeholder="請輸入備註消息"> </textarea>
  
•   <textarea id="msg" placeholder="請輸入備註消息">
  

        </textarea>

  就是這麼神奇，開始和結束標籤中間不能有任何東西，不能有空格，不能換行，要連在一塊兒      寫。隨手敲一個空格的習慣要改~

2.placeholder換顏色

  input::-webkit-input-placeholder{

      color:red;

  }

emmm~針對不一樣瀏覽器或不一樣版本的瀏覽器要添加對應的前綴。

 input::-moz-placeholder{ /* Mozilla Firefox 19+ */

color:red;

}

input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */

color:red;

}

input:-ms-input-placeholder{ /* Internet Explorer 10-11 */

color:red;

}

3.手機調用攝像頭

  這個是我感受今天get了一個了不起的技能，可是我旁邊的後端隊友說我二傻子同樣，（白眼~）

  今天有個需求要調用攝像頭拍照，上傳圖片，以前寫過微信公衆號的掉微信攝像頭掃二維碼，我第一反應就是去用微信調用，可是還須要微信參數配置，就在我準備配的時候，咱們大大前端給我說，你直接input就能夠啊，input[type="file"]在移動端就會直接調用本身系統的攝像頭和相冊。我頓悟~那叫一個豁然開朗，醍醐灌頂啊！

4.上傳圖片，即時預覽

先上代碼，樣式本身隨便寫寫就ok了。重點是在js代碼上

html代碼

<div class="fot_img">

<input type="file" accept="image/*"/ id="filed">

<img src="fot_img.png" alt="佔位圖片" id="imgshow">

</div>

js代碼

 <script>

$('#filed').change(function () {

var file = $('#filed').get(0).files[0];

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (e) {

console.log(e);

$('#imgshow').get(0).src = e.target.result;

}

})

</script>

總的思想就是經過上傳的圖片對象中找到該圖片base64的編碼，而後展現出來。

4.上傳文件限制只上傳圖片就用input的accept屬性哦

<input type="file" accept="image/*"/ id="filed">

(追加)

5.ios中使用input會出現黑色閃屏的問題

解決辦法：html，body{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

複製代碼