关于input,textarea

  碎碎念——html

        今天开发时碰见了一个以前踩过的坑,可是忘记怎么解决了,感受很悲伤,又去查查以后才搞定,有点浪费时间,毕竟天天忙的跟个小陀螺同样。准备常常随手记一点,养成个好习惯,话说以前也记了好多东西,不过都是记在笔记本上,喜欢纸和笔的感受,做为一个码农,估计是有点格格不入了,笔记本不能随身携带,何况个人仍是加大版的乃种,之后仍是转移阵地记在电脑上吧。前端

  正文——ios

1.textarea的placeholder死活没有用,显示不出来。web

  正确写法:<textarea id="msg" placeholder="请输入备注消息"></textarea>
后端

  错误写法:浏览器

  •   <textarea id="msg" placeholder="请输入备注消息"> </textarea>
  •   <textarea id="msg" placeholder="请输入备注消息">

        </textarea>bash

  就是这么神奇,开始和结束标签中间不能有任何东西,不能有空格,不能换行,要连在一块儿      写。随手敲一个空格的习惯要改~微信

2.placeholder换颜色编码

  input::-webkit-input-placeholder{spa

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








复制代码
相关文章
相关标签/搜索