零零散散的积累

Posted 2021-02-02 congke

在做项目时，会遇到一些小问题，现在趁空余时间把这些零散的问题给罗列一下，虽然都是找度娘看各位大神的解答，但是还是想都整理出来，一来给自己加个印象二来以便以后的运用。

1、

问题描述：ios下，移动端的web页面中input获取焦点弹出系统虚拟键盘时，input框被虚拟键盘挡住了。

解决办法：

(1)

$(‘input‘).on(‘click‘, function () {

　　var target = this;

　　// 使用定时器是为了让输入框上滑时更加自然

　　setTimeout(function () {

　　 　　target.scrollIntoView(true);

　　 },100);

});

(2)

$("input").on("focus", function() {
// 使用定时器是为了让输入框上滑时更加自然
var interval = setInterval(function() {
　　document.body.scrollTop = document.body.scrollHeight;
　　clearInterval(interval);
　　}, 200);
});

2、

问题描述：让块元素的文本多行显示，显示不完的省略号代替。

解决办法：

div{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　display:-webkit-box;

　　-webkit-line-clamp:2;

　　-webkit-box-orient:vertical;

}

3、

问题描述：如何限制textarea仅允许纵向改变大小。

解决办法：

texterea{

　　resize:vertical;   // both横向和纵向都可调整；vertical仅允许纵向的调整；horizontal仅允许横向的调整；none不可调整大小

}

4、

问题描述：在使用textarea的时候,默认前面的文字是在最下面的，需要将文字放在左上角。

解决办法：

textarea{

　　vertical-align:top;

}

5、

问题描述：如何去掉在谷歌浏览器下video标签出现的下载按钮。

解决办法：

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

6、

问题描述：float元素浮动后，高度不一致的li导致错位。

解决办法：给换行的第一个li添加clear:left样式

li:nth-of-type(odd){

　　clear:left

}

这里需啰嗦一句，那个odd不行的话，我就用的even，到底是因为什么我暂时也还不清楚，如果有人知道可以讲一哈噢。

7、

问题描述：点击某按钮后，让其事件消失即禁用。

解决办法：pointer-events的作用就是让元素实体虚化，可以实现时间的完全禁用

a{

　　pointer-events:none;

}

8、

问题描述：当页面很长，遮罩层不能完全覆盖页面。

解决办法：用fixed,不用absolute

div{

　　position:fixed;

　　left:0;

　　top:0;

　　right:0;

　　bottom:0;

　　margin:auto;

　　width:100%:

　　height:100%;

　　background:rgba(0,0,0,.5);

　　z-index:9999;

}

9、

问题描述：如何让select文字居中。

解决办法：

select {

　　text-align: center;

　　text-align-last: center;

}

10、

问题描述：如何修改placeholder默认的样式。

解决办法：

input::-webkit-input-placeholder { /* WebKit browsers*/
　　color:#999;font-size:14px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
　　color:#999;font-size:14px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+*/
　　color:#999;font-size:14px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+*/
　　color:#999;font-size:14px;
}

11、

问题描述：在所有元素没有超过width:100%的情况下，移动端出现横向滚动条。

解决办法：出现这种情况看一下是否该页面的内容过多，内容过多导致导致页面出现纵向滚动条，占用了页面的宽度

:root {
　　overflow-y: auto;
　　overflow-x: hidden;
}

12、

问题描述：根元素设置了line-height，对其内部元素产生影响，例如根元素的字体大小为100px,里面的块元素设置了高度为50px，那么块元素的高度为50px，里边的内联元素依旧是100px，会撑破块元素。

解决办法：（1）内联元素转化为块元素，不会继承根元素的内容；（2）内联元素改变行高

13、

问题描述：解决长串英文字母自动换行。

解决办法：

div{

　　word-wrap:break-word;

　　word-break:break-all;

}

14、

问题描述：select默认选中项颜色为灰色，选择后变为黑色。

解决办法：

<script>
　　$(function () {

　　　　var unSelected = "#999";
　　　　var selected = "#333";
　　　　$("select").css("color", unSelected);
　　　　$("option").css("color", selected);
　　　　$("select").change(function () {
　　　　　　var selItem = $(this).val();
　　　　　　if (selItem == $(this).find(‘option:first‘).val()) {
　　　　　　　　$(this).css("color", unSelected);
　　　　　　} else {
　　　　　　　　$(this).css("color", selected);
　　　　　　}
　　　　});
　　})

</script>

15、

问题描述：解决移动端图片模糊的问题。

解决办法：图片不要用1:1比例的图，用2X的图，这样看起来就很清晰了

16、

问题描述：实现一个文字搜索的功能，要求输入时，键盘回车按钮提示显示为“搜索”。

解决办法：input type = ‘search‘实现搜索框，参考链接 https://segmentfault.com/a/1190000007765742

17、

问题描述：使用html2canvas在前端生成图片。

解决办法：

参考链接

https://segmentfault.com/a/1190000011478657?utm_source=tag-newest

https://www.jianshu.com/p/22bd5b98e38a

需引入html2canvas.js和canvas2image.js；

// 将html绘制成图片
function convert2canvas() {
　　var shareContent = $(‘#oCanvas‘)[0];//需要截图的包裹的（原生的）DOM 对象
　　var width = shareContent.offsetWidth; //获取dom 宽度
　　var height = shareContent.offsetHeight; //获取dom 高度
　　var canvas = document.createElement("canvas"); //创建一个canvas节点
　　var scale = 2; //定义任意放大倍数 支持小数
　　canvas.width = width * scale; //定义canvas 宽度 * 缩放
　　canvas.height = height * scale; //定义canvas高度 *缩放
　　canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
　　var opts = {
　　　　allowTaint: false,
　　　　tainttest:true, //检测每张图片都已经加载完成
　　　　scale: scale, // 添加的scale 参数
　　　　canvas: canvas, //自定义 canvas
　　　　logging: true, //日志开关，便于查看html2canvas的内部执行流程
　　　　width: width, //dom 原始宽度
　　　　height: height,
　　　　useCORS: true, // 【重要】开启跨域配置
　　};

html2canvas(shareContent, opts).then(function (canvas) {
　　var context = canvas.getContext(‘2d‘);
　　// 【重要】关闭抗锯齿
　　context.mozImageSmoothingEnabled = false;
　　context.webkitImageSmoothingEnabled = false;
　　context.msImageSmoothingEnabled = false;
　　context.imageSmoothingEnabled = false;

　　// 【重要】默认转化的格式为png,也可设置为其他格式
　　var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
　　console.log(img);

　　$("#oCanvas").append(img);
　　$(img).attr({
　　　　‘class‘:‘canvas-img‘,
　　　　"crossorigin":"anonymous"
　　});
　　$(img).css({
　　　　"position":"absolute",
　　　　"left":"0",
　　　　"top":"0",
　　　　"width":canvas.width / 2 + "px",
　　　　"height":canvas.height / 2 + "px",
　　　　"z-index":"10000"
　　})

　});
}

18、

问题描述：动画暂停和运行。

解决办法：animation-play-state属性，paused暂停；running运行