Tag: html5

在拖动子元素时触发父元素的“dragleave”: 概观我有以下HTML结构，并将dragenter和dragleave事件附加到<div id="dropzone">元素。 <div id="dropzone"> <div id="dropzone-content"> <div id="drag-n-drop"> <div class="text">this is some text</div> <div class="text">this is a container with text and images</div> </div> </div> </div> 问题当我通过<div id="dropzone">拖动一个文件时， dragenter事件按预期被触发。但是，当我将鼠标移动到像<div id="drag-n-drop">类的子元素上时，为<div id="drag-n-drop">元素触发dragenter事件，然后dragleave事件是为<div id="dropzone">元素触发的。如果我再次将鼠标hover在<div id="dropzone">元素上，则dragenter事件再次被触发，这很酷，但是随后为刚刚离开的子元素触发dragleave事件，所以执行removeClass指令，即不酷。这种行为有两个原因是有问题的：我只是将dragenter和dragleave到<div id="dropzone">所以我不明白为什么儿童元素也附加了这些事件。我仍在拖动<div id="dropzone">元素，同时将dragleavehover在它的子元素上，所以我不想让dragleave发射！的jsfiddle 这是一个jsFiddle修补： http : //jsfiddle.net/yYF3S/2/ 题所以…我怎么能这样做，当我拖动一个文件通过<div id="dropzone">元素，即使我拖动dragleave元素， dragleave不会触发…它应该只有在离开<div id="dropzone">元素时才会触发…在元素边界内的任何位置hover/拖动不应触发dragleave事件。我需要这是跨浏览器兼容的，至less在支持HTML5拖放的浏览器中，所以这个答案是不够的。 Google和Dropbox似乎已经知道了这一点，但是他们的源代码被缩小/复杂了，所以我没有能够从他们的实现中得出这个结论。

使用Node.js将video文件stream式传输到html5video播放器，以便video控件继续工作？: Tl;博士 – 问题：使用Node.js处理video文件到html5video播放器的正确方法是什么，以便video控件继续工作？我认为这与处理标题的方式有关。无论如何，这是背景信息。代码有点冗长，但是，它非常简单。使用Node将小video文件stream式传输到HTML5video很容易我学会了如何轻松地将小video文件传输到HTML5video播放器。通过这种设置，控制器无需任何工作，videostream完美无瑕。具有示例video的完整工作代码的工作副本位于此处，可在Google文档中下载。客户： <html> <title>Welcome</title> <body> <video controls> <source src="movie.mp4" type="video/mp4"/> <source src="movie.webm" type="video/webm"/> <source src="movie.ogg" type="video/ogg"/> <!– fallback –> Your browser does not support the <code>video</code> element. </video> </body> </html> 服务器： // Declare Vars & Read Files var fs = require('fs'), http = […]

为什么内联事件处理程序在现代语义HTML中是一个坏主意？: 内联事件处理程序是否被认为是不好的做法？例如： <button onclick=someFunction()>Click me!</button> 如果是这样，使用内联事件处理程序的缺点是什么？

HTML5 File API中的FileReader.readAsText如何工作？: 我写了下面的代码来检查上传的文件是否存在或不使用HTML5文件API。 <input type="file" id="myfile"> <button type="button" onclick="addDoc()">Add Document</button> <p id="DisplayText"></p> 以下JavaScript代码已被映射到它如下： function addDoc() { var file=document.getElementById("myFile").files[0]; //for input type=file var reader=new FileReader(); reader.onload = function(e) {} reader.readAsText(file); var error = reader.error; var texte=reader.result; document.getElementById("DisplayText").innerText=reader.result; /*<p id="DisplayText>*/ } 在从本地系统浏览文件之后，我尝试在点击addDoc()之前删除文件夹中的“浏览”文档。点击button后，我仍然可以看到Filereader.result不是空的，可以显示所有的内容。有人可以解释如何Filereader的作品？文件被浏览后， FileReader是否被绑定？我们也可以检查系统Readonly属性是否与FileReader类似，Java File.canread() ？有人可以build议吗？我有IE11来testing代码。

JavaScript：更改embedded标签的src属性: 我有以下情况。我向用户显示一些来自服务器的audio文件。用户点击一个，然后onFileSelected最终与选定的文件夹和文件执行。函数做的是从embedded对象中改变源代码。所以在某种程度上，它是在接受它之前预览选定的文件并保存用户的select。一个视觉援助。 HTML <embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file"> JavaScript的 function onFileSelected(file, directory) { jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); }; 现在，这在Firefox中运行良好，但Safari和Chrome只是拒绝更改源代码，而不考虑操作系统。 jQueryfind对象（jQuery.size（）返回1），它执行代码，但没有改变HTML代码。为什么Safari会阻止我更改<embed>源代码，我怎样才能绕过这个呢？

仅限CSS使用边框半径和透明背景设置animation效果: 我正在尝试绘制一个带有边界半径的圆，并为其添加animation。我可以做到这一点，但我不能做的是覆盖元素，并设置圆圈背景透明，没有取消隐藏面具。我无法使它在元素上透明，因为蒙版需要应用来隐藏圆的左半部分，因为它旋转以模仿绘制效果。 HTML <div class="background"> <div class="wrapper"> <div class="pie spinner"></div> <div class="pie filler"></div> <div class="mask"></div> </div> </div> CSS .background{ background:green; z-index: 1000; } .wrapper { width: 250px; height: 250px; position: relative; margin: 40px auto; background: rgba(0,0,255,1); } .wrapper, .wrapper * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper .pie { width: 50%; height: […]

模拟放置文件事件: 是否有可能使用JavaScript来模拟/伪造拖放事件？如何testing这种types的事件？举例来说，这个dnd上传示例页面，是否可以通过文件来触发“drop”事件，而不会实际上丢弃文件？比方说点击一个button？我已经开始写一个Sukuli脚本，可以控制鼠标，并做的伎俩，但我正在寻找一个更好的解决scheme。编辑 @kol回答是摆脱拖放事件的好方法，但我仍然需要从我的电脑手动select一个文件。这是我有兴趣模拟的一点。有没有办法以编程方式创build文件variables？ var fileInput = document.getElementById('fileInput'), file = fileInput.files[0];

获取iframe中input字段的值: 我只用Javascript创build一个表单。我正在尝试使用Javascript来获取iframe中的input字段的值。是否有可能获得在iframe中的字段的值？

新的HTML5元素像<section>和<article>没有意义吗？: 不要杀了我，我只是出于纯粹的好奇心。像<section>, <nav>, <article>, <aside>等元素都显得毫无意义。当然，他们让所有事情都有自己的一席之地（而且是seo）……但是有可能过度组织事情。在某些情况下，事物也不适合任何类别。这也增加了花在编码这些东西上的时间。我只是没有看到任何移动添加这些新元素的真正目的。我们（开发人员和查看网页的人们）必须从添加它们中获得什么？

将自定义属性（HTML5）支持添加到JSF 2.0 UIInput组件: 我正在尝试编写一个将处理<h:inputText>组件上的placeholder属性的呈示器。在阅读JSF 2.0去掉所需的HTML5属性之后，我走向了这条道路，看起来是正确的。这是我的自定义渲染器 public class InputRenderer extends com.sun.faces.renderkit.html_basic.TextRenderer{ @Override public void encodeBegin(FacesContext context, UIComponent component) throws IOException { System.out.println("Rendering :"+component.getClientId()); String placeholder = (String)component.getAttributes().get("placeholder"); if(placeholder != null) { ResponseWriter writer = context.getResponseWriter(); writer.writeAttribute("placeholder", placeholder, "placeholder"); } super.encodeBegin(context, component); } @Override public void decode(FacesContext context, UIComponent component) { super.decode(context, component); } @Override public void encodeEnd(FacesContext […]