html
关注
分享
扫一扫
hangGe0111
这个作者很懒，什么都没留下…
展开
-
ios输入框被软键盘遮住问题
在ios中，输入框被软键盘遮住，这是众所周知的bug，那么如何来解决这个问题呢？最近的项目中就遇到了这个问题，然后经过高人指点解决了这个问题，以及遇到的另外一些问题。首先我们先来说说弹出软键盘，在ios中，弹出软键盘，会将整个页面给怼上去，因此我们只能看到半个页面，然而在andriod中，整个网页高度会缩小，因此我们在弹出软键盘时，能够监听到andriod的窗口大小变化——resize事件，但是...转载 2020-04-20 13:16:48 · 1131 阅读 · 0 评论 -
iPhone X适配顶部刘海充满，底部悬浮充满
1.iPhone X的顶部有齐刘海，如果底部写一个fixed定位的底部悬浮不能到达底部，头部和底部都留有空隙，其实这是它的所谓的安全区，头部有44px，底部有34px。2.完全充满2.1在meta标签中声明viewport-fit=cover<meta name="viewport" content="width=device-width,viewport-fit=cover"...原创 2018-12-29 17:24:32 · 708 阅读 · 0 评论 -
html5 自动播放chrome浏览器报错Uncaught (in promise) DOMException:
Chrome的自动播放的政策在2018年4月做了更改，这点在开源中国的这篇文章中也有说到。新的行为：浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策，Chrome的autoplay 政策非常简单1. muted autoplay始终被允许2. 音乐的autoplay 只有在下面集中情况下起作用： 2.1有用户行为发生像（click,tap,etc）；...原创 2018-12-29 17:24:53 · 35984 阅读 · 0 评论 -
自定义CheckBox和radio
1.CheckBox和radio不能改变样式，但点击label标签可以点选CheckBox和radio，所以可以通过这个方法来改变；2.代码和展示2.1html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2018-12-29 17:25:09 · 12375 阅读 · 0 评论 -
常用less小结
1.对于常用的，做了一个简单小结，后续如果还有别的，再继续完善1.1less/****border-radius系列****//**上左**/.radiusTopleft(@radius:5px){ border-top-left-radius:@radius; -webkit-border-top-left-radius:@radius; -moz-bord...原创 2018-12-30 17:44:37 · 235 阅读 · 0 评论 -
select2的language变为中文
1.加一段js<script type="text/javascript"> (function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var e=jQuery.fn.select2.amd;return e.define("select2...原创 2019-01-14 16:28:33 · 6481 阅读 · 5 评论 -
模拟input的placeholder，textarea的字数监听，textarea的右下角三条线隐藏,placeholder样式修改
1.模拟input的placeholder（有些情况，需要兼容到低版本的IE，但placeholder在低版本的IE上不展示，就得兼容一下。思路：模拟placeholder，通过value来，使用聚焦和失焦事件控制）2.textarea的字数监听有input和propertychange，判断浏览器，进行初始赋值；3.代码<!doctype html><htm...原创 2019-01-14 16:28:52 · 639 阅读 · 0 评论 -
触屏查看大图（可以缩放）
1.less(如果需要less的，可以拿过去，如果不需要，只要引入css即可).pl_mainLi-RcImgList .pl_mainLi-RcImg:first-child{ z-index: 1; }.pl_mainLi-RcImg { width: 100%; height: 100%; position: absolute; left: 0; top:...原创 2019-01-24 17:08:03 · 13467 阅读 · 0 评论 -
获取自定义属性(attr和prop)实例介绍
1.attr获取自定属性（1）attr获取，修改，删除自定义属性代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>input textarea</title> <style原创 2019-01-21 15:16:28 · 792 阅读 · 0 评论 -
form表单提交，form通过手机键盘发送提交提交，小程序表单提交
1.html<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>input textarea</title> <style type="text/css"&am原创 2019-01-21 15:16:40 · 503 阅读 · 0 评论 -
select2修改下拉框列表的内容，修改选中的内容
1.需求：需要在下拉框列表中同时展示名称和id，将其两个字段进行拼接即可，但选中的展示内容不要id只要展示名称；2.思路：展示时进行拼接，选中时强制改变选中内容即可；3.实现3.1代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><..原创 2019-02-28 13:57:26 · 2582 阅读 · 0 评论 -
zoom与scale的区别
最近做了两个项目，一个需要对字体缩小，小于默认的字体大小(12px),最后使用transform:scale(0.9),但整个元素宽高都被缩小了，感觉很不好~~~做另外一个项目要求将整体页面安一定比例缩小，最初使用了scale,缩小是达到了，但页面位置已经不晓得跑哪去了，于是改用zoom,看着舒服多了，于是我就想用zoom缩放字体，转载 2019-03-28 16:08:36 · 734 阅读 · 0 评论 -
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY是鼠标事件对象下的几个属性.之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解；clientX,clientY,screenX,screenY,offsetX,offsetY这几个属性是“鼠标事件对象”下的属性，所...转载 2019-03-28 16:08:56 · 538 阅读 · 0 评论 -
滑动时候警告：Unable to preventDefault inside passive event listener
移动端Web界面滚动性能优化 Passive event listeners最近更新了ios11.3,项目上发现这么一个问题，“我的”页面和两个列表页的滚动出现了问题，滚动时候不仅滚动了希望滚动的部分，整体的页面也跟随者上下滚动，整个页面非常卡顿。这两个页面都用了touch事件 控制台打印如下警告：[Intervention] Unable to preventDefault ins...转载 2019-05-22 17:39:08 · 440 阅读 · 0 评论 -
audio在微信活动中自动播放
1.代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initia原创 2018-12-29 17:24:43 · 759 阅读 · 0 评论 -
vue图片上传
1.思路：通过input[type="file"],将图片信息传给后台，后台生成网络图片资源，点击保存，再把该网络图片地址传给后台；2.代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2018-12-29 17:24:07 · 332 阅读 · 0 评论 -
select2动态填充数据（option普通版），初始赋值
1.代码(普通版)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0原创 2018-12-29 17:23:43 · 2887 阅读 · 0 评论 -
div的contenteditable=true;属性使其可编辑
1.true可编辑2.false不可编辑 http://www.w3school.com.cn/tags/att_global_contenteditable.asp3.plaintext-only只能输入纯文本4.更多参考 https://w3c.github.io/editing/contentEditable.html#contenteditable5.代码和展示...原创 2018-07-30 18:23:41 · 1929 阅读 · 0 评论 -
WeUI使用
方法一：1.先去官网（官方网址：https://weui.io/）==》右键查看源码找到<link rel="stylesheet" href="./weui.css"/>点击href后的路径即可进入https://weui.io/weui.css，把所有的css复制到自己本地的weui.css文件中。如果嫌麻烦，也可引入bootcdn线上资源里的css。2.如果想使...原创 2018-08-11 13:38:10 · 7353 阅读 · 3 评论 -
weui之Picker的使用，分别获取label和value
1.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>WeUI</title> <!--必须--> <meta name="viewport" content=原创 2018-08-11 13:38:19 · 19606 阅读 · 6 评论 -
HTML meta viewport属性说明(mark)
转载：https://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同...转载 2018-08-02 22:33:12 · 207 阅读 · 0 评论 -
手机键盘搜索功能
1.css* { margin: 0; padding: 0;}.centerinput { width: 100%; height: 2.95rem; background-color: #f6f6f6; padding-top: 0.6rem; position: relative; box-sizing: border-box;...原创 2018-08-22 17:47:27 · 1497 阅读 · 0 评论 -
1px的border 1像素边框
1.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; pa原创 2018-10-18 18:35:50 · 450 阅读 · 1 评论 -
判断对象是否为空对象
转载：https://blog.csdn.net/kongjiea/article/details/788512211.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...转载 2018-10-30 17:26:55 · 1176 阅读 · 0 评论 -
slect2.js
官网：http://select2.github.io/1.slect2.js<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href="https://cdnjs.clou原创 2018-11-08 17:14:42 · 205 阅读 · 0 评论 -
合并icon字体图标
1.字体图标使用比较方便，当项目做好以后进行后期项目维护时，会新增字体图标，那么怎样将两个或者多个字体图标进行合并；2.举个栗子，我分别在http://iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a（阿里的iconfont下载两批字体图标）；我将这两批图标合并：（1）首先需要两批字体图标（分别放在文件夹1和文件夹2，可以去iconfo...原创 2018-11-08 17:15:05 · 1957 阅读 · 0 评论 -
点击鼠标实现复制功能，兼容主流浏览器
1.有一个需求，点击鼠标左键，复制链接，可以将该链接粘贴，实现一个简单的复制粘贴功能2.代码实现（1）HTML代码<!DOCTYPE html><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/htm原创 2018-11-29 17:38:30 · 861 阅读 · 0 评论 -
横向两列布局（左列固定，右列自适应）的4种CSS实现方式
转载：https://www.jb51.net/css/455079.html需要实现横向两列布局：左列固定，右列自适应的效果，如下图：1.html<DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试练习</title>转载 2018-12-06 19:05:05 · 585 阅读 · 0 评论 -
select2动态填充数据（豪华VIP自定义option）
1.代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>select2</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4原创 2018-12-29 17:23:55 · 2479 阅读 · 0 评论 -
html中文编码显示乱码
1.在某些手机中，会出现部分中文乱码，例如㎡显示这种情况应该将平方米改为html字符实体，而不能直接通过键盘拼写的；2.如果整片HTML中文都乱码则是文件编码格式的问题 有些手机不支持 GB2312 和 GBK格式，最好改为utf-8格式(1)html头部文件中<meta http-equiv="Content-Type" content="text/html; charset=utf-8"...转载 2018-07-13 17:58:59 · 3455 阅读 · 1 评论