零零散散的積累

在作項目時，會遇到一些小問題，如今趁空餘時間把這些零散的問題給羅列一下，雖然都是找度娘看各位大神的解答，可是仍是想都整理出來，一來給本身加個印象二來以便之後的運用。

一、

問題描述：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);
});

二、

問題描述：讓塊元素的文本多行顯示，顯示不完的省略號代替。

解決辦法：

div{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　display:-webkit-box;

　　-webkit-line-clamp:2;

　　-webkit-box-orient:vertical;

}

三、

問題描述：如何限制textarea僅容許縱向改變大小。

解決辦法：

texterea{

　　resize:vertical;   // both橫向和縱向均可調整；vertical僅容許縱向的調整；horizontal僅容許橫向的調整；none不可調整大小

}

四、

問題描述：在使用textarea的時候,默認前面的文字是在最下面的，須要將文字放在左上角。

解決辦法：

textarea{

　　vertical-align:top;

}

五、

問題描述：如何去掉在谷歌瀏覽器下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); 
}

六、

問題描述：float元素浮動後，高度不一致的li致使錯位。

解決辦法：給換行的第一個li添加clear:left樣式

li:nth-of-type(odd){

　　clear:left

}

這裏需囉嗦一句，那個odd不行的話，我就用的even，究竟是由於什麼我暫時也還不清楚，若是有人知道能夠講一哈噢。

七、

問題描述：點擊某按鈕後，讓其事件消失即禁用。

解決辦法：pointer-events的做用就是讓元素實體虛化，能夠實現時間的徹底禁用

a{

　　pointer-events:none;

}

八、

問題描述：當頁面很長，遮罩層不能徹底覆蓋頁面。

解決辦法：用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;

}

九、

問題描述：如何讓select文字居中。

解決辦法：

select {

　　text-align: center;

　　text-align-last: center;

}

十、

問題描述：如何修改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;
}

十一、

問題描述：在全部元素沒有超過width:100%的狀況下，移動端出現橫向滾動條。

解決辦法：出現這種狀況看一下是否該頁面的內容過多，內容過多致使致使頁面出現縱向滾動條，佔用了頁面的寬度

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

十二、

問題描述：根元素設置了line-height，對其內部元素產生影響，例如根元素的字體大小爲100px,裏面的塊元素設置了高度爲50px，那麼塊元素的高度爲50px，裏邊的內聯元素依舊是100px，會撐破塊元素。

解決辦法：（1）內聯元素轉化爲塊元素，不會繼承根元素的內容；（2）內聯元素改變行高

1三、

問題描述：解決長串英文字母自動換行。

解決辦法：

div{

　　word-wrap:break-word;

　　word-break:break-all;

}

1四、

問題描述：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>

1五、

問題描述：解決移動端圖片模糊的問題。

解決辦法：圖片不要用1:1比例的圖，用2X的圖，這樣看起來就很清晰了

1六、

問題描述：實現一個文字搜索的功能，要求輸入時，鍵盤迴車按鈕提示顯示爲「搜索」。

解決辦法：input type = 'search'實現搜索框，參考連接 http://www.javashuo.com/article/p-pdzifxhu-hp.html

1七、

問題描述：使用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"
　　})

　});
}

1八、

問題描述：動畫暫停和運行。

解決辦法：animation-play-state屬性，paused暫停；running運行

1九、

問題描述：js拼接字符串時須要加空格。

解決辦法：使用\xa0，如：
var quality = result[0].foodName + ';' + '\xa0\xa0\xa0' + result[0].weight