span与a元素的键盘聚焦性以及键盘点击性研究——张鑫旭

一.众所周知的与不为所知的我们平时涉及点击交互事件的时候,都是使用的a元素或者button元素,原因是可以相应键盘focus效果以及回车触发点击事件,这是众所周知的. 但是,可能存在一些特殊情况,我们需要使用默认没有键盘可访问性的元素,例如span元素,我们可以通过一定的设置支持键盘的可访问性,这是不为所知的,也是本文的重点所在. 二.span元素处理与测试要让一个普通的span元素达到一个含button元素的键盘可访问性,我们需要如下处理: 首先,很显然的,绑定点击事件: 给元素设置tab…

CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en"> <head> <meta charset="UT…

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut…

说说HTML5中label标签的可访问性问题——张鑫旭

一.开篇叨叨一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 我们看看点评网的注册页面那个同意条款的复选框,非要点在复选框上才能选中: 查看HTML发现复选框id和label标签的for属性值都是空,不解~~ 像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的,像是豆瓣网, 新浪微博等: 我们一般有两种方法来优雅地扩…

CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

一.CSS下兼容性的元素水平/垂直翻转实现随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy…

不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什么手脚的话,IE6~IE8浏览器不支持HTML5元素, <nav>, <header>, <footer>, <article> … 然而,前篇Google前端规范HTML部分中提到:要使用语义的HTML5元素作为text/html, 考虑到Google不可能把…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"…

python+selenium+bs4爬取百度文库内文字 && selenium 元素可以定位到，但是无法点击问题 && pycharm多行缩进、左移

先说一下可能用到的一些python知识一.python中使用的是unicode编码, 而日常文本使用各类编码如:gbk utf-8 等等所以使用python进行文字读写操作时候经常会出现各种错误, 一般都是操作时没有进行转码操作.而转码则需要decode(解码)和encode(编码)方法. 如: str1.decode('gbk'), 表示将gbk编码的字符串'str1'转换成unicode编码. str2.encode('gbk'), 表示将unicode编码的字符串'str2'转换gbk编…

atitit.编程语言程序语言的工具性和材料性双重性 and 语言无关性本质

atitit.编程语言程序语言的工具性和材料性双重性 and 语言无关性本质 #---语言的工具和材料双重性有的人说语言是个工具,有的人说语言是个材料..实际上语言同时属于两个属性..走跟个光的波粒二重性雅十.. #---语言的工具属性走跟个对于开发效率最大的影响就是工具... 现今,使用比较广泛的语言主要的c语言系列的.. 按照开发效率次序:: c++<java<groovy<php/c#<Gail框架作者老哇的爪子 Attilax 艾龙, EMAI…

apple mac 下使用机械键盘的办法，键盘映射工具软件，apple mac Mechanical keyboard

apple mac 下使用机械键盘的办法,键盘映射工具软件,apple mac Mechanical keyboard 想在苹果电脑 mac 系统下使用机械键盘,大部分机械键盘不是为mac设计的,所以需要用软件做一下键盘映射. 推荐使用这个:https://pqrs.org/osx/karabiner/ .…

selenium 元素可以定位到，但是无法点击问题

报错1: selenium.common.exceptions.WebDriverException: Message: Element is not clickable at point (82, 12). Other element would receive the click:<div id="jbox-fade" class="jbox-fade" style="position: absolute; height: 873px; widt…

MUI - 打开页面默认弹出键盘及返回关闭键盘

打开页面默认弹出键盘及返回关闭键盘 http://www.cnblogs.com/phillyx/ (function(keyboard) { var openSoftKeyboard = function() { if (mui.os.ios) { var webView = plus.webview.currentWebview().nativeInstanceObject(); webView.plusCallMethod({ "setKeyboardDisplayRequiresUser…

提升键盘可访问性和AT可访问性

概述很多地方比如官网中需要提升 html 的可访问性,我参考 element-ui,总结了一套提升可访问性的方案,记录下来,供以后开发时参考,相信对其他人也有用. 可访问性可访问性基本上分为 2 类: 键盘可访问性:要求页面上的所有可交互的地方均可通过键盘操作. AT可访问性:AT 是 Assistive Technologies 的简写,主要是方便残障用户和网站内容进行交互. 键盘可访问性键盘可访问性有很多内容,但是我觉得主要实现如下 2 点即可: 1.可以使用 tab 来获取焦点.这其…

（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif-----------这个系列包括有衬线的字体,很像新闻报纸的文字排版. monospace-这个系列的字体包含固定宽度的字符(即每个字母在水平方向所占的宽度都是相同的),主要用于显示软件代码示例.(代码很重视对齐.缩进,所以对宽度要求高) cursive-------这个系列的字体包含看似手写的字体…

js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 13) { // enter 键 //要做的事情 alert("按 Enter"); } if (e.keyCode == 86 && e.ctrlKey) { aler…

真正让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦

转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的,经我长久论证因为他们不具有tab属性,所以只要我们创建tab,那么任何标签都可以具有tab属性. 什么标签具有tab呢?显然input和a是得天独厚的具有,我们经常用键盘上的tab键进行移动光标的时候,我们发现光标只在具有tab属性的元素上进行跳转. 我们现在来让div拥有tab并具有onfucus…

span(行级元素)在不定高的div(块级元素)中垂直居中的方法

设置父级元素: align-items: center; display: flex;…

解决h5底部输入框在ios被软键盘顶飞软键盘消失还下不来

好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴.在安卓机子上则没有这样的情况. 解决方法是通过h5的scrollIntoView去实现.scrollIntoView()可以在所有的HTML元素上调用,在滚动浏览器窗口,或者窗口发生变化时,可以调用该方法让元素出现在视窗中.(本文的例子就是软键盘的弹出改变了窗口的高度) 该方法不传参数或者传入true可以让元素与视窗顶部齐平,如果传入false调用元素会…

常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码

MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pageX e.pageY //当前鼠标触发点距离BODY(第一屏幕左上角的X/Y轴坐标) e.preventDefault() ;//阻止默认行为 e.stopPropagation();//阻止事件的冒泡 KeyboardEvent键盘事件对象 e.keyCode/e.which//当前按键的键盘码 ie用…

iOS 自定义键盘ToolBar（与键盘的弹出、收起保持一致）

1.监听键盘改变的通知 [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyBoardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil]; 2.实现通知方法 /** * 给键盘的frame改变添加监听 * @param keyBoardWillChangeFrame: 监听方法 */ - (void)ke…

再论EM算法的收敛性和K-Means的收敛性

标签(空格分隔): 机器学习 (最近被一波波的笔试+面试淹没了,但是在有两次面试时被问到了同一个问题:K-Means算法的收敛性.在网上查阅了很多资料,并没有看到很清晰的解释,所以希望可以从K-Means与EM算法的关系,以及EM算法本身的收敛性证明中找到蛛丝马迹,下次不要再掉坑啊..) EM算法的收敛性 1.通过极大似然估计建立目标函数: \(l(\theta) = \sum_{i=1}^{m}log\ p(x;\theta) = \sum_{i=1}^{m}log\sum_{z}p(x,z;…

键盘--android 隐藏系统键盘

. -----------------------------------------已验证----------------------------------- public static void closeBoard(Context mcontext) { InputMethodManager imm = (InputMethodManager) mcontext .getSystemService(Context.INPUT_METHOD_SERVICE); // imm.hi…

隐藏自定义的tabbar之后，push到B视图，B视图的键盘工具条无法响应点击事件

我的情况如下: 在TabbarViewController中隐藏了系统的tabbar,然后自定义tabbar,A B C D 4个视图都有UINavigationController,A视图使用的是系统的navigationBar,当我从A视图push到E视图时(E视图是集成第三方SDK的一个聊天视图),用通知调用TabbarViewController中的方法隐藏自定义的tabbar(只是把自定义的tabbar设置为透明),E视图显示出来之后,底部的键盘工具条就无法响应点击事件. 解决办法:…

delphi 7 信息对话框的按钮屏蔽键盘操作,只允许鼠标点击

本问题由 delphi 学友QQ群中一位群友提出,个人觉得是一个好问题. 本教程源码下载本教程面向新手,希望大家能从中学到除了本功能之外的真正编程技能. 本功能的实现原理,用窗口当对话框的界面,在界面上放两个TButton,再放一个TLabel用于显示信息,但要阻止键盘操作按钮,需要对按钮进行处理.详细说明在源代码中. 以下是新手教程 a) 去掉 TFrmMsgBox 中的全局变量: 菜单 Project ---> Options... ,或者按 ctrl + shift + f11 组合键,…

uni-app 在input获取焦点（弹出软键盘后收起软键盘），页面不下滑，留下下方空白

加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });…

python 采坑总结调用键盘事件后导致键盘失灵的可能原因

在练习python封装键盘事件的时候,实现一个keyDown和keyUp的功能: @staticmethod def keyDown(keyName): #按下按键 win32api.keybd_event(KeyboardKeys.VK_CODE[keyName],0,0,0) @staticmethod def keyUp(keyName): #释放按键 win32api.keybd_event(KeyboardKeys.V…

iOS 键盘处理（改变键盘为完成键），UITextField键盘显示隐藏，弹出，回弹

很多时候用到UITextField时,处理键盘是一个很棘手的问题. 问题一:如何隐藏键盘? 方案1.改变键盘右下角的换行(enter)键为完成键,后实现代理方法键盘自动回弹 keyBoardControll.gif UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(100, 300, 200, 40)]; [self.view addSubview:textField]; textField.delegat…