- 浏览: 37788 次
- 性别:
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端,js,jquery (8)
- html (2)
- jquery,html5,html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端,js,jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒,ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
不废话 直接上代码:
*{
-webkit-touch-callout:none;//当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
none:
系统默认菜单被禁用
default:
系统默认菜单不被禁用
/* -webkit-user-select:none:
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
*/
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本,但选择范围受元素边界的约束
(注意)仅适用于ios安卓不适用
}
click事件在ios上有300秒的延迟,在网上有好几个解决方法个人感觉比较麻烦直接用的jquery封装了一个tap事件这样就不存在延时了。以下是封装tap事件的代码:
//自定义tap
$(document).on("touchstart", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 0);
});
$(document).on("touchmove", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 1);
});
$(document).on("touchend", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable") && $target.data("isMoved") == 0) $target.trigger("tap");
});
10行代码OK;注意放到初始化文件或者脚本文件的最后
输入框会被输入法遮挡的解决办法:
$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
//如果弹出对话框时,底层的视图就不让滚动了
document.addEventListener('touchmove', function(e) {
if(disableScroll){
e.preventDefault();
}
}, false);
var disableScroll=true;//禁止滚动
var disableScroll=false;//可以滚动
获取li标签的下标
在你使用target获取触发事件的元素的时候他会获取当前的点击的元素,如果你的li标签里面包含其他元素他会获取里面的元素并不能获取到当前的li这时候你要向上寻找的li的标签
$('.js_shiptype').on('click',function(e){
var _nodeName = e.target;
var $target;
_nodeName.nodeName.toLocaleLowerCase() == 'li' ? $target=$(_nodeName) : $target=$(_nodeName).parents('li');
//jq判断浏览器的来自哪里
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == "micromessenger") {
$('#J_barcodeTrigger').hide();
return true;//微信打开
}else if(ua.match(/qq/i) == "qq"){
$('#J_barcodeTrigger').hide();
return true;//QQ打开
}else if(ua.match(/aliapp/i) == "aliapp"){
$('#J_barcodeTrigger').show();
return true;//支付宝打开 aliapp
}else{
$('#J_barcodeTrigger').hide();
return false;
}
iframe子页面操作父页面的元素
$('#idAddressDetailed',parent.document).hide();/*操作父页面iframe元素*/
在父页面调用子页面的test方法为:
$("#mainfrm")[0].contentWindow.test();
父页面是指iframe元素所在的页面,子页面是指所引入的当前页面
*{
-webkit-touch-callout:none;//当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
none:
系统默认菜单被禁用
default:
系统默认菜单不被禁用
/* -webkit-user-select:none:
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
*/
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本,但选择范围受元素边界的约束
(注意)仅适用于ios安卓不适用
}
click事件在ios上有300秒的延迟,在网上有好几个解决方法个人感觉比较麻烦直接用的jquery封装了一个tap事件这样就不存在延时了。以下是封装tap事件的代码:
//自定义tap
$(document).on("touchstart", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 0);
});
$(document).on("touchmove", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 1);
});
$(document).on("touchend", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable") && $target.data("isMoved") == 0) $target.trigger("tap");
});
10行代码OK;注意放到初始化文件或者脚本文件的最后
输入框会被输入法遮挡的解决办法:
$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
//如果弹出对话框时,底层的视图就不让滚动了
document.addEventListener('touchmove', function(e) {
if(disableScroll){
e.preventDefault();
}
}, false);
var disableScroll=true;//禁止滚动
var disableScroll=false;//可以滚动
获取li标签的下标
在你使用target获取触发事件的元素的时候他会获取当前的点击的元素,如果你的li标签里面包含其他元素他会获取里面的元素并不能获取到当前的li这时候你要向上寻找的li的标签
$('.js_shiptype').on('click',function(e){
var _nodeName = e.target;
var $target;
_nodeName.nodeName.toLocaleLowerCase() == 'li' ? $target=$(_nodeName) : $target=$(_nodeName).parents('li');
//jq判断浏览器的来自哪里
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == "micromessenger") {
$('#J_barcodeTrigger').hide();
return true;//微信打开
}else if(ua.match(/qq/i) == "qq"){
$('#J_barcodeTrigger').hide();
return true;//QQ打开
}else if(ua.match(/aliapp/i) == "aliapp"){
$('#J_barcodeTrigger').show();
return true;//支付宝打开 aliapp
}else{
$('#J_barcodeTrigger').hide();
return false;
}
iframe子页面操作父页面的元素
$('#idAddressDetailed',parent.document).hide();/*操作父页面iframe元素*/
在父页面调用子页面的test方法为:
$("#mainfrm")[0].contentWindow.test();
父页面是指iframe元素所在的页面,子页面是指所引入的当前页面
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11581.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 471<div class="js_mobile&q ... -
js 规格多选,选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1068<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 345/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 773<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
esayui
2016-10-28 17:12 570$(function(){ $('#peopleGrid') ... -
字符串分割显示
2016-09-20 14:09 512/* 运单号分割显示 */ var oT=document. ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 590<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 530<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 583<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4527加广告与加封页脚的代码是差不多的! 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 574<!DOCTYPE html> <html& ... -
各种图形
2016-07-21 14:47 485<!DOCTYPE html PUBLIC " ... -
小用例
2016-07-20 17:24 362<!DOCTYPE html> <html& ...
相关推荐
15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15个移动端原型组件15...
在本篇文章中,作者将分享如何使用Vue.js来实现移动端拖动排序功能。这一技术在移动端的交互设计中非常常见,如在列表编辑、图片轮播、九宫格布局等场景中。Vue.js是一个构建用户界面的渐进式JavaScript框架,它提供...
小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小...
常用移动端公共css
在移动端网页开发中,开发者面临着一系列独特的挑战,如屏幕尺寸各异、触摸交互、网络环境不稳定等。本资源包“移动端网页开发可参考源代码”提供了一些开源框架和实用的源码示例,可以帮助开发者快速理解和掌握...
《HUI移动端前端框架详解与应用》 在数字化时代的洪流中,移动端应用开发日益重要,而优秀的前端框架则是构建高效、响应迅速的移动应用的关键。HUI移动端前端框架,作为一个专门为移动端设计的前端解决方案,它以其...
在移动端,ECharts能够适应不同屏幕尺寸,为用户提供流畅的交互体验。 首先,我们要理解ECharts的基本使用方法。ECharts通过引入其JavaScript库文件,可以在HTML页面中创建图表。在移动端应用时,通常会将其与响应...
移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件
在H5移动端开发中,部门树展示是一种常见的需求,它用于组织结构的呈现,比如公司内部的部门架构、员工层级关系等。这种功能通常应用于企业内部管理系统或者协作平台,便于用户快速查找和理解组织结构。下面我们将...
本文将深入探讨如何使用JavaScript实现一个适用于移动端的树型列表,并且介绍如何进行灵活的修改以适应不同的需求。 首先,我们需要理解树型列表的基本结构。树型列表由节点构成,每个节点可以包含子节点,形成一个...
移动端适配
《Ant Design风格移动端分享版——打造卓越的移动用户体验》 Ant Design,作为一款广受欢迎的前端UI框架,以其高效、可扩展和优雅的设计理念,在Web开发领域占据了一席之地。而今天我们要探讨的是其在移动端的延伸...
本文将详细介绍“移动端日期时间插件”这一主题,特别是以Mobiscroll为例,阐述其在实际应用中的重要性和使用方法。 Mobiscroll是一款专为移动端设计的高性能、易用的日期时间选择插件,它提供了丰富的自定义选项和...
移动端登录界面
在移动端应用开发中,日期时间选择控件是一个非常常见的组件,它允许用户方便地选取日期和时间,广泛应用于各种场景,如预约、日程安排、表单填写等。本话题将深入探讨移动端日期时间选择控件的设计原理、实现方式...
随着移动互联网技术的发展,企业办公场景逐渐向移动端迁移,提高工作效率成为企业信息化建设的重要方向之一。泛微OA作为国内领先的企业协同管理软件及云服务提供商,为满足企业在移动办公方面的需求,提供了丰富的...
移动端通用元件库.rplib
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码,较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目, 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作...
移动端组件库是Axure为了方便设计师快速构建移动应用原型而设计的一套资源集合。这个"Axure移动端组件库"包含了各种常见于手机应用的组件,如按钮、输入框、导航栏、滑块、列表、图标等,大大提高了设计效率,减少了...
在移动端在线浏览PDF是一种常见的需求,特别是在移动办公和学习场景中。PDF(Portable Document Format)是一种通用的文件格式,能够保留文档的原始布局和样式,方便跨平台分享和查看。以下是一些关于移动端在线浏览...