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

复制代码