零零散散的积累
在做项目时,会遇到一些小问题,现在趁空余时间把这些零散的问题给罗列一下,虽然都是找度娘看各位大神的解答,但是还是想都整理出来,一来给自己加个印象二来以便以后的运用。
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运行
19、
问题描述:js拼接字符串时需要加空格。
解决办法:使用\xa0,如:
var quality = result[0].foodName + ';' + '\xa0\xa0\xa0' + result[0].weight