关于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);}

复制代码