textarea 使用, 输入框光标, 移动端屏幕颠倒, 微信露底, 查询匹配

<textarea id='appiMcAddr'
minlength="5" 
maxlength="50" 
ng-minlength="5" 
ng-maxlength="50" 
onkeyup="replaceAndSetPos(this,/[.“”【】‘’！#~《》<>·？。￥~!@$%^+*&\?|:.{}';=……s]/g,'');"
placeholder="请填写家庭地址" 
ng-model="appiMcAddr" 
name="appiMcAddr" 
required 
ng-focus="focusappiMcAddr=true" 
ng-blur="focusappiMcAddr=false"
ng-class="{true: 'red_waring', false: ''}[ form1.appiMcAddr.$invalid && !focusappiMcAddr]"
rows='1'   //重要
onpropertychange='this.style.posHeight = this.scrollHeight;'  //重要
>

</textarea>





function resetTextareaHeight(){

var textareaList = document.getElementsByTagName('textarea');
if(!textareaList || textareaList.length == 0){
return
}
var html_fontSize = parseInt($('html').css('fontSize'));
for(var i=0; i<textareaList.length; i++){
var id_ele = textareaList[i];
id_ele.style.height = 'auto';
id_ele.style.height = id_ele.scrollHeight/html_fontSize + 'rem';

}
}





/////////////设定光标位置///////// 
function getCursorPos(obj) 
{ 
var CaretPos = 0; 
// IE Support 
if (document.selection) { 
obj.focus (); //获取光标位置函数 
var Sel = document.selection.createRange (); 
Sel.moveStart ('character', -obj.value.length); 
CaretPos = Sel.text.length; 
} 
// Firefox/Safari/Chrome/Opera support 
else if (obj.selectionStart || obj.selectionStart == '0') 
CaretPos = obj.selectionEnd; 
return (CaretPos); 
} 
/* 
定位光标 
*/ 
function setCursorPos(obj,pos) 
{ 
if(obj.setSelectionRange) { //Firefox/Safari/Chrome/Opera 
obj.focus(); // 
obj.setSelectionRange(pos,pos); 
} else if (obj.createTextRange) { // IE 
var range = obj.createTextRange(); 
range.collapse(true); 
range.moveEnd('character', pos); 
range.moveStart('character', pos); 
range.select(); 
} 
} 


/* 
替换后定位光标在原处,可以这样调用onkeyup=replaceAndSetPos(this,/[^/d]/g,''); 
*/

function replaceAndSetPos(obj,pattern,text){ 
/*if(event.shiftKey||event.altKey||event.ctrlKey||event.keyCode==16||event.keyCode==17||event.keyCode==18||(event.shiftKey&&event.keyCode==36)) 
return; */ 

var pos=getCursorPos(obj);//保存原始光标位置 


var temp=obj.value; //保存原始值 



obj.value=temp.replace(pattern,text);//替换掉非法值

//截掉超过长度限制的字串（此方法要求已设定元素的maxlength属性值） 
var max_length = obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""; 

if( obj.value.length > max_length){ 
//法一：obj.value = obj.value.substring( 0,max_length);若用户在中间进行输入，此方法则达不到效果 

//法二：可以满足任何情况（当超过输入了，去掉新输入的字符） 
var str1 = obj.value.substring( 0,pos-1 ); 
var str2 = obj.value.substring( pos,max_length+1 ); 
obj.value = str1 + str2; 

// if(obj.value.length > max_length){
//    obj.value = obj.value.substring( 0,max_length);    
//}
if(obj.value.length > max_length){
obj.value = obj.value.substring( 0,max_length);
}


/*法三：在支持keycode等一系列的情况下使用 
var e=e||event; 
currKey=e.keyCode||e.which||e.charCode; 
currKey = 0; 
或 
window.onkeydown=function(){ 
if( event.keyCode!=37 && event.keyCode!=39 && event.keyCode!=8 )// 左、右、删除 
{ return false; } 
}*/ 
} 

pos=pos-(temp.length-obj.value.length);//当前光标位置 


setCursorPos(obj,pos);//设置光标

var html_fontSize = parseInt($('html').css('fontSize'));

if(obj.nodeName.toLowerCase() == "textarea"){

obj.style.height = 'auto';
obj.style.height = (obj.scrollHeight/html_fontSize).toFixed(1) + 'rem';
}

}



//折叠框func

$('.panel-title').find('button').on('click',function(){

if($(this).parent('.panel-title').parent('.panel-heading').next('.panel-collapse').css('display') == 'none'){

$(this).parent('.panel-title').parent('.panel-heading').next('.panel-collapse').slideDown(500);
$(this).find('.icon_img').addClass('icon_img_active');
$(this).parent('.panel-title').parent('.panel-heading').parent('.panel-default').siblings('.panel-default').find('.panel-collapse').slideUp(500);
$(this).parent('.panel-title').parent('.panel-heading').parent('.panel-default').siblings('.panel-default').find('.icon_img').removeClass('icon_img_active');
document.getElementById('main_fixed').scrollTop = 0;

resetTextareaHeight();

}else{

$('.panel-collapse').slideUp(500);
$('.icon_img').removeClass('icon_img_active');
}
});







//禁止safari浏览器缩放
// document.addEventListener('touchstart',function(e){
// console.log('禁止safari浏览器缩放')
// var e = e || window.event;
// if(e.touches.length > 1){
// console.log('禁止safari浏览器缩放preventDefault')
// e.preventDefault();
// e.stopPropagation();
// return
// }
// },false)
// var lastTouchend = 0;
// document.addEventListener('touchmove',function(e){
// var e = e || window.event;
// var now = (new Date()).getTime();
// if(now - lastTouchend <= 500){
// e.preventDefault();
// e.stopPropagation();
// return
// }
// },false);

function showCover(obj){
$('#cover').show();
if(typeof(obj) == 'number'){
$('#bounceBox').hide();
$('#alertBox').hide();
if(obj == 1){
$('#noticeM').show(); 
$('#Mloading').text('正在加载...');
$('#noticeN').hide(); 
}else if(obj == 2){
$('#noticeM').show();
$('#Mloading').text('正在读取...');
$('#noticeN').hide();
}else if(obj == 3){
$('#noticeM').show();
$('#Mloading').text('正在提交...');
$('#noticeN').hide();
}else if(obj == 0){
$('#noticeM').show();
$('#Mloading').text('正在上传...');
$('#noticeN').hide();
}else{
$('#cover').hide();
$('#noticeM').hide();
$('#noticeN').hide();
}
}else if(typeof(obj) == 'object'){
$('#noticeM').hide();
$('#noticeN').hide();
$('#bounceBox').hide();
$('#alertBox').hide();

var target={
okBt:obj.okBt ? obj.okBt : function(){return} ,
cancelBt:obj.cancelBt ? obj.cancelBt : function(){$('#cover').hide();},
closeBt:obj.closeBt ? obj.closeBt : function(){$('#cover').hide();},
okText:obj.okText ? obj.okText : '确定',
cancelText:obj.cancelText ? obj.cancelText : '取消',
closeText:obj.closeText ? obj.closeText : '关闭',
title:obj.title ? obj.title : '本次申请链接已被使用，请关闭本页面，重新扫描二维码进行申请',
showkind:obj.showkind ? obj.showkind : 1, //默认显示第一种方式，即确认和取消按钮，2就为关闭按钮,3提示语
timer:obj.timer ? obj.timer : 2000, //默认2000ms定时关闭
}

$('#bounceBox_title').html(target.title);


if(target.showkind == 1){
$('#bounceBox').show();
$('#okBt').show();
$('#cancelBt').show();
$('#closeBt').hide();
$('#okBt').text(target.okText).on('click',function(){
target.okBt();
});
$('#cancelBt').html(target.cancelText).on('click',function(){
target.cancelBt();
});
}else if(target.showkind == 2){
$('#bounceBox').show();
$('#okBt').hide();
$('#cancelBt').hide();
$('#closeBt').show();
$('#closeBt').html(target.closeText).on('click',function(){
target.closeBt();
});
}else if(target.showkind == 3){
$('#alertBox').show();
$('#alertBox_title').text(target.title);

if(typeof(target.timer) == 'number'){
setTimeout(function(){
$('#cover').hide();
},target.timer);
}else if(typeof(target.timer) == 'string'){

}else{
console.log('timer error');
return false;
}

}else{
console.log('setting error');
return false;
}


}

}
function closeWindow(){
var ua = window.navigator.userAgent.toLowerCase();
console.log('关闭浏览器')
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
console.log('关闭MicroMessenger浏览器')
WeixinJSBridge.call('closeWindow');
}else{
if(navigator.userAgent.indexOf("Firefox")!=-1||navigator.userAgent.indexOf("Chrome")!=-1){
console.log('关闭Firefox/Chrome浏览器')
window.location.href="about:blank";
setTimeout(function(){
showCover({
showkind:3,
title:'请手动关闭浏览器',
timer:2000,
});
},1000);
}else if(navigator.userAgent.toLowerCase().indexOf('qq') != -1){
console.log('关闭qq浏览器')
window.opener = null;
window.open('', '_self', '');
window.close();
window.top.close();

setTimeout(function(){
showCover({
showkind:3,
title:'请手动关闭浏览器',
timer:2000,
});
},300);

}else{
console.log('非标准关闭浏览器')
window.opener = null;
window.open('', '_self', '');
window.close();
window.top.close();

setTimeout(function(){
showCover({
showkind:3,
title:'请手动关闭浏览器',
timer:2000,
});
},1000);

}


}
}

function getVersion(){
return '2.1.2'
}



//防止微信露底

function preventScroll(id,off){

id = id.indexOf('#') != -1 ? id.slice(1) : id;

var content = document.getElementById(id);
var startY;

content.addEventListener('touchstart',touchstart_Func,false);
content.addEventListener('touchmove',touchmove_Func,false);

function touchstart_Func(e){
var e = e || window.event;

startY = e.touches[0].clientY;

if(e.target.getAttribute('class') === 'photo-clip-rotateLayer'){
console.log('防止微信露底事件解除')
content.removeEventListener('touchstart',touchstart_Func,false);
content.removeEventListener('touchmove',touchmove_Func,false);
return
}

}

function touchmove_Func(e){
var e = e || window.event;

var status = '11';
var ele = this;
var currentY = e.touches[0].clientY;
if(ele.scrollTop === 0){
status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
}else if(ele.scrollTop + ele.offsetHeight >= ele.scrollHeight){
status = '10';
}

if(status != '11'){
var direction = currentY - startY > 0 ? '10' : '01';
if(!(parseInt(status,2) & parseInt(direction,2))){
console.log('防止微信露底:preventDefault')
e.preventDefault();
e.stopPropagation();
return
}
}
}
}


//检查屏幕的方向
function checkDirection(){
var resize_timer = null;
// window.removeEventListener('orientationchange',orientationchangeFunc,false);
window.addEventListener('orientationchange',orientationchangeFunc,false);
}

function orientationchangeFunc(e){
console.log('orientationchange:'+window.orientation)
if(window.orientation == 0){
console.log('竖屏')

setTimeout(function(){
clearTimeout(resize_timer);
showCover(4);
},500);

}else{

resize_timer = setTimeout(function(){
showCover({
showkind:3,
title:'为了更好的体验，请切换方向！',
timer:'off',
});
},1000);
}
}

//显示超过行数，显示省略号

.thirdProduct_desc p {
 font-size: 0.12rem;
 color: #999999;
 max-height: 1rem;
 text-overflow: ellipsis;
 overflow: hidden;
 word-break: break-all;
 display: -webkit-box;
 -webkit-line-clamp: 5;
 -webkit-box-orient: vertical;
}

.select_item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

var searchBt = document.querySelector('#searchBt');
var str = document.querySelector('#box').innerHTML;

searchBt.onclick = function(){
var search_value = document.querySelector('#inputBox').value;
var reg = eval("/"+search_value+"/ig"); //只能这个方式写才可以.

if(reg.test(str)){
console.log('all right')
document.querySelector('#box').innerHTML = str.replace(reg,"<span style='color:red;'>"+search_value+"</span>");
}else{
console.log('no')
document.querySelector('#box').innerHTML = str
}


}

import {mapState,mapMutations,mapGetters} from 'vuex';

computed: {//监听socketData的变化 做页面处理 ...mapState([ 'socketData', ]), ...mapGetters([ 'getterSocketData', ]) },

watch:{ getterSocketData(message){//message 就是socketData console.log(message);//根据数据指示 进行逻辑操作 ........................ } }

vue 如果子组件里面使用了，scope，又想给页面中的element自动生成的类名，可以加deep，不用每次修改global定义的类

.aa{

　　/deep/ .bb{

　　}

}