Tag: html5

tabIndex不使用Tab键使标签可以聚焦

我试图用图标replacecheckbox/收音机input。 为此,我需要隐藏原来的checkbox/收音机。 问题是,我也希望窗体正确支持键盘input,即让input保持Tab键焦点和可选Spacebar 。 因为我隐藏了input,所以不能集中注意力,所以我试图使它的<label>可调焦。 这个文档和各种其他来源使我相信我可以使用tabindex属性(对应于HTMLElement.tabIndex属性)来做到这一点。 但是,当我尝试将tabindex分配给我的标签时,它仍然像以往一样不专心,无论我尝试Tab还是如此。 为什么不tabindex使标签可重点? 以下片段演示了这个问题。 如果你用鼠标把input集中在一起,并尝试使用Tab对标签进行聚焦,它将不起作用(它会将下面的<span>用tabindex来代替)。 document.getElementById('checkbox').addEventListener('change', function (event) { document.getElementById('val').innerHTML = event.target.checked; }); <div> <input type="text" value="input"> </div> <div> <label tabindex="0"> <input type="checkbox" id="checkbox" style="display:none;"> checkbox: <span id="val">false</span> </label> </div> <span tabindex="0">span with tabindex</span> (JavaScript代码只是允许看到正确点击标签(联合国)检查checkbox。)

检测属性值的属性改变我做的

我在HTML data-select-content-val创build了一个属性,并dynamic地填充了信息。 有没有办法检测属性的值何时更改? $(document).on("change", "div[data-select-content-val]", function(){ alert("BOOP!"); });

如何使用带有history.pushstate和popstate的后退button触发更改?

当谈到js时,我几乎是个新手,所以如果我错过了一些非常简单的东西,我很抱歉。 基本上,我已经做了一些研究,使用history.pustate和popstate,我做了这样一个查询string被添加到URL( ?v=images )或( ?v=profile )的末尾… ( v意思是“视图”)通过使用这个: var url = "?v=profile" var stateObj = { path: url }; history.pushState(stateObj, "page 2", url); 我想这样做,所以我可以加载到div的内容,但没有重新加载我已经完成使用.load()函数的页面。 然后我使用这个代码: $(window).bind('popstate', function(event) { var state = event.originalEvent.state; 在$(document).ready()部分,稍后在<script>标签内尝试,并且都不起作用。 我不知道该怎么做,所以当我使用后退button时,内容会发生变化,或者至less这样做,我可以触发我自己的function; 我假设它与状态对象有关? 我似乎无法在网上find任何能清楚解释这个过程的东西。 如果有人能帮助我,这将是惊人的,并提前感谢任何人!

Javascript的Git客户端

有没有Git的Javascript实现? 我想使用HTML5来创build一个丰富的JavaScript应用程序,并有想法,我可以使用git来跟踪数据的变化。 所以,我想知道是否有一个git客户端的JavaScript实现,或者可能通过发出POST请求来控制git存储库的某种方式。

Google Wave中的实时实时打字工作如何?

我确信Wave不会每毫秒轮询一次服务器,以确定其他用户是否input了某些内容…因此,如何查看对方键入的内容? 而不占用带宽。

HTML5中可以使用类似Photoshop的混合模式吗?

我想在网页上放一个红色的长方形的<div>元素,这样看起来不仅透明,而且像Photoshop的Multiply模式一样。 <div> position: fixed ,所以下面的内容会很快改变。 这是可能的任何HTML5 / CSS3 /帆布/ SVG技巧?

如何使响应表

我有一个表格来表示我的HTML页面中的一些数据。 我试图使这个表作为响应。 我怎样才能做到这一点 ? 这是Demo 。

HTML5 data- *属性types转换string和数字

为什么data-value="2.0"的值被强制转换为String,而data-value="2.5"强制转换为Number? 我可以在我的function内处理这个罚款。 我只是想更多地了解Javascript如何处理数字和string。 这种情况让我措手不及。 <a data-value="2.0">2.0</a> <a data-value="2.5">2.5</a> $("a").click(function() { alert(typeof $(this).data( "value")); }); [小提琴]

如何在循环中播放CSS3转换?

下面的样式只是一个如何在CSS3中设置转换的例子。 是否有一个纯粹的CSS技巧,使循环播放? div { width:100px; height:100px; background:red; transition:width 0.1s; -webkit-transition:width 0.1s; /* Safari and Chrome */ -moz-transition:width 0.1s; /* Firefox 4 */ -o-transition:width 0.1s; /* Opera */ transition:width 0.1s; /* Opera */ } div:hover { width:300px; }

在窗口外拖动时如何检测Firefox中的dragleave事件

在窗口外拖动时,Firefox不能正确地触发dragleave事件: https://bugzilla.mozilla.org/show_bug.cgi?id=665704 https://bugzilla.mozilla.org/show_bug.cgi?id=656164 我正在尝试为此开发一个解决方法(我知道这是可能的,因为Gmail正在这样做),但我唯一能想出的东西似乎真的很黑。 有一种方法可以知道在窗外拖动时是否等待dragover事件停止发射(因为dragover在拖放操作过程中不断发射)。 以下是我如何做到这一点: var timeout; function dragleaveFunctionality() { // do stuff } function firefoxTimeoutHack() { clearTimeout(timeout); timeout = setTimeout(dragleaveFunctionality, 200); } $(document).on('dragover', firefoxTimeoutHack); 这个代码本质上是一遍又一遍地创build和清除一个超时。 除非dragover事件停止发射,否则将不会达到200毫秒超时。 虽然这有效,但我不喜欢为此使用超时的想法。 感觉不对 这也意味着在“dropzone”造型消失之前还有一点点滞后。 我的另一个想法是检测鼠标何时离开窗口,但是正常的做法似乎在拖放操作中不起作用。 有没有人有更好的方式做到这一点? 更新: 这里是我使用的代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Drag and Drop Issue</title> <script src="http://code.jquery.com/jquery.js"></script> </head> <body> Open up the console and […]