一些零碎知识
最近工作遇到的問題，用vue寫的，有一個(gè)錨點(diǎn)的效果，剛剛開始用的是錨點(diǎn)做的，效果做的不是很好，主要是因?yàn)?#xff0c;錨點(diǎn)切換，我不能監(jiān)控錨點(diǎn)的變化，從而修改我的tab切換欄的樣式。超級(jí)簡單的問題，一時(shí)間沒有想到，真郁悶
剛開始的時(shí)候，用offsetTop，但是滾動(dòng)打的時(shí)候，offsetTop的值一直木有變化，我還以為是offsetTop我用錯(cuò)了，查了一些資料，才知道把這個(gè)屬性理解錯(cuò)了。發(fā)現(xiàn)自己的思路也有些問題，后來就換了一種方法。以后記好了。
<!doctype html> <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>錨點(diǎn)</title><style>#container{width: 100%;height: 2000px;}#box1,#box2{width: 100%;height: 500px;background: green;}#box2{background: yellow;}#header{position: fixed;top:0px;width: 100%;height: 200px;border:1px solid red;}</style></head><body><div id="header"><input type="button" id='handleClick' value='click'></div><div id="container"><div id="box1"></div><div id="box2"> </div></div><script>document.getElementById('handleClick').οnclick=function(){var box1 = document.getElementById('box1').offsetHeight;animation(box1);}function animation(target){var timer=setInterval(a,30);function a(){var speed =Math.ceil((target - document.body.scrollTop)/3);if(document.body.scrollTop >= target){clearInterval(timer);}else{document.body.scrollTop = document.body.scrollTop + speed;}}}</script></body> </html>//滾動(dòng)條消失
.container::-webkit-scrollbar {
width: 0px;
height:0px;
}
/*去掉input默認(rèn)樣式*/
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
//去除輸入框默認(rèn)的記錄 <input id="position-search" class="position-search"
autocomplete="off"//這句重點(diǎn)
type="search" placeholder="輸入職位名稱進(jìn)行查詢" v-model="positionName" @keyup.enter="getPositionSearch" @click.stop="getInfoSearch($event)">
//去除 textarea 的右下角的角標(biāo)
.textarea{
width: 100%;
min-height: 3.2rem;
background: rgba(29,29,38,0.05);
resize : none; //這句重點(diǎn)
}
//js 獲取系統(tǒng) rem 對(duì)應(yīng)的 px 的值 var fontSize = parseFloat(window.getComputedStyle(document.documentElement)["fontSize"])
//去除 ios下 textarea 默認(rèn)的陰影 -webkit-appearance: none;
//iso下 捕捉焦點(diǎn) textarea_value_click: function (e) {
this.ifshow = !this.ifshow;
textarea_value_element = $(e.target);
$('#textarea_area').show().focus();
if (this.textarea_value == '請(qǐng)?zhí)顚?#39;) {
this.textarea_value = '';
}
},
//初始化地點(diǎn)使用方式
initUse_method: function () {
var that = this;
$('#use_method').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
that.use_method = text;
}
});
$('#quantity').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
that.quantity = parseInt(text);
}
});
$('#get_method').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
that.use_method_ifShow = false;
if (text == '本地印章打印機(jī)自取') {
that.get_method = 'a';
that.use_method_ifShow_a = true;
that.use_method_ifShow_b = false;
that.use_method_ifShow_c = false;
that.online_notice_text = '印章類型為電子印章，需自行到本公司指定印章打印機(jī)找印章協(xié)調(diào)員領(lǐng)取';
} else if (text == '郵寄至本公司印章協(xié)調(diào)員') {
that.get_method = 'b';
that.use_method_ifShow_a = false;
that.use_method_ifShow_b = true;
that.use_method_ifShow_c = false;
that.online_notice_text = '印章類型為物理印章，證明開具后郵寄至公司所在地址';
} else {
that.get_method = 'c';
that.use_method_ifShow_a = false;
that.use_method_ifShow_b = false;
that.use_method_ifShow_c = true;
that.online_notice_text = '印章類型為物理印章，可自定義郵寄地址';
}
}
});
var width=$(window).width()/3;
var defaultArea = $('#myArea').attr('areaid');
$('#myArea').scroller('destroy').scroller({
preset: 'area',
theme: 'android-ics light',
defaultValue: defaultArea,
mode: 'scroller',
lang: 'zh',
display: 'bottom',
animate: 'slideup',
maxWidth:width,
rows: 3,
onSelect: function (text,src) {
that.use_method_area=src.area;
that.use_method_area_string = text;
}
});
$("#myArea").on('click', function () {
$("#myArea").scroller('show');
})
},
incomeType:function(){
var that = this;
$('#income_type').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
if (text =='當(dāng)前月薪' ){
that.salary = that.salay_list.A
that.income_type ='A';
}else if (text =='近12個(gè)月稅前月均收入'){
that.salary = that.salay_list.B
that.income_type ='';
}else if (text =='近12個(gè)月稅前年薪' ){
that.salary = that.salay_list.C
that.income_type ='C';
}else if (text =='上一自然年度稅前年薪' ){
that.salary = that.salay_list.D
that.income_type ='D';
}
}
});
setTimeout(function () {
that.listenClick();
},300)
},
listenClick:function(){
var that =this;
//判斷是否為蘋果
var use_method_dummy = document.getElementById('use_method_dummy');
var quantity_dummy = document.getElementById('quantity_dummy');
var get_method_dummy = document.getElementById('get_method_dummy');
var myArea = document.getElementById('myArea');
var income_type_dummy = document.getElementById('income_type_dummy');
var textarea_area = document.getElementById('textarea_area');
var textarea_value_span = document.getElementById('textarea_value_span');
if (isIPHONE){
document.addEventListener('touchstart',function (e) {
var e = e || window.event;
if (e.target == use_method_dummy || e.target == income_type_dummy || e.target == quantity_dummy || e.target == get_method_dummy || e.target == myArea ){
e.preventDefault();
$('#textarea_area').blur();
$('#receive').blur();
$('#cellphone').blur();
}
},false);
document.addEventListener('touchend',function (e) {
var e = e || window.event;
if (e.target == use_method_dummy || e.target == income_type_dummy || e.target == quantity_dummy || e.target == get_method_dummy || e.target == myArea ){
setTimeout(function () {
$(e.target).trigger('click');
},350)
}
},false)
}
},
//文本框在也難下面,輸入法遮住
if(/Android [4-6]/.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
},0);
}
})
}
?
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function(type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function(name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function(name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function() {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
console.log(elem.scrollHeight,document.documentElement.scrollTop);
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra +10+ 'px';
console.log(height,extra)
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};
var appiMcAddr = document.getElementById("appiMcAddr");
var appiMcEmplAddr = document.getElementById("appiMcEmplAddr");
autoTextarea(appiMcAddr); // 調(diào)用
autoTextarea(appiMcEmplAddr); // 調(diào)用
//所有的input框不能記憶用戶輸入的數(shù)據(jù)
$('input').attr('autocomplete','off').attr('spellcheck','off').attr('autocorrect','off').attr('autocapitalize','off');
//iso 光標(biāo)漂移問題
var ua = window.navigator.userAgent.toLowerCase();
var is_ios = /iphone|ipad|ipod/g.test(ua)?true:false;
var inputList = document.getElementsByTagName('input');
var textareaList = document.getElementsByTagName('textarea');
var ele_focus;
if(is_ios){
var if_focus = false;
var if_focus_s = false;
for(var i=0;i<inputList.length;i++ ){
inputList[i].addEventListener('click',inputFocus,false)
inputList[i].addEventListener('blur',inputBlur,false)
}
for(var i=0;i<textareaList.length;i++ ){
textareaList[i].addEventListener('click',inputFocus,false)
textareaList[i].addEventListener('blur',inputBlur,false)
}
function inputFocus(e){
var e = e || window.event;
ele_focus = e.target;
if(ele_focus.type != 'radio'
&& ele_focus.type != 'checkbox'
&& ele_focus['id']!='appiMcAddrCity'
&& ele_focus['id']!='appiMcResideType_dummy'
&& ele_focus['id']!='appiMcResideSts_dummy'
&& ele_focus['id']!='appiMcResideYear'
&& ele_focus['id']!='appiMcEducation_dummy'
&& ele_focus['id']!='appiMcEmplAddrCity'
&& ele_focus['id']!='appiMcEmplIndustryType_dummy'
&& ele_focus['id']!='appiMcEmplBizType_dummy'
&& ele_focus['id']!='appiMcEmplPosiYear'
&& ele_focus['id']!='appiMcEmplBizType_dummy'
&& ele_focus['id']!='check_ck'
){
if_focus = true;
if_focus_s = true;
var ele_top = $(ele_focus).offset().top;
$('#hiddenInput').css('top',ele_top)
}else{
if_focus = false;
if_focus_s = false;
}
}
function inputBlur(e){
var e = e || window.event;
if_focus = false;
}
document.querySelector('body').addEventListener('touchmove',touchmove_ios,false);
function touchmove_ios(e){
var e = e || window.event;
if(if_focus){
$('#hiddenInput').focus();
if_focus = false;
}
}
1.由于是在觸屏上使用所以沒有用到IE的二級(jí)事件。
2.做了一個(gè)判斷，只在IPHONE上觸發(fā)。
3.當(dāng)時(shí)做完了同事說方法執(zhí)行的太快了，客戶來不及反應(yīng)鍵盤就隱藏了，于是添加了一個(gè)time參數(shù)用做settimeout設(shè)置。
?
//判斷是否為蘋果 var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;// 元素失去焦點(diǎn)隱藏iphone的軟鍵盤 function objBlur(id,time){if(typeof id != 'string') throw new Error('objBlur()參數(shù)錯(cuò)誤');var obj = document.getElementById(id),time = time || 300,docTouchend = function(event){if(event.target!= obj){setTimeout(function(){obj.blur();document.removeEventListener('touchend', docTouchend,false);},time);}};if(obj){obj.addEventListener('focus', function(){document.addEventListener('touchend', docTouchend,false);},false);}else{throw new Error('objBlur()沒有找到元素');} }if(isIPHONE){var input = new objBlur('input');input=null; }?
?$("input").on("click",function(){vartarget=this;setTimeOut(function(){target.scrollIntoView(true);},100);})
?
轉(zhuǎn)載于:https://www.cnblogs.com/xmhu/p/6272064.html
總結(jié)
- 上一篇： lnmp之php5.6.29安装
- 下一篇： Future 和 ExecutorCom