Tag: html5

如何使用html5 JS提取API上传文件？: 我仍然试图围住它。我可以让用户用文件inputselect文件（甚至多个文件）： <form> <div> <label>Select file to upload</label> <input type="file"> </div> <button type="submit">Convert</button> </form> 而且我可以使用<fill in your event handler here>来捕获submit事件。但是一旦我这样做，我该如何使用fetch发送文件？ fetch('/files', { method: 'post', // what goes here? What is the "body" for this? content-type header? }).then(/* whatever */); 我不知道我是否应该使用FileReader接口？编辑：我认为我在正确的方向，但不知道。我从input type=file元素中获取文件，然后： const fr = new FileReader(); fr.readAsBinaryString(file); fr.addEventListener("loadend", function (evt) { […]

更改占位符文本: 如何更改input元素的占位符文本？例如，我有3个input的文本types。 <input type="text" name="Email" placeholder="Some Text"> <input type="text" name="First Name" placeholder="Some Text"> <input type="text" name="Last Name"placeholder="Some Text"> 如何使用JavaScript或jQuery更改“ 某些文本”文本？我真的需要找出解决我的问题。

WebRTC无法从USBinput设备获取video（readyState会结束）: 我正尝试使用WebRTC在屏幕上显示videoinput作为实时馈送。我不是想做任何对等的通讯或类似的东西，只是显示一个video源。代码我有我的笔记本电脑集成摄像头工作正常，但是当我连接外部videoinput设备（在这种情况下，通过S-Video连接到USBinput使用StarTech转换器的旧摄像机 – 型号SVID2USB2NS），我什么也没得到。我已经在Chrome和FireFox中试过了。这两个浏览器findvideo设备，并提供我的集成摄像头或USB设备（在这种情况下列为“USB 2820”）的select，所以他们知道在这种情况下的设备。在Chrome中，当我尝试连接时，getUserMedia调用的“成功”callback被调用，如果我.getVideoTracks（）findMediaStreamTrack ，并且callback的时刻， MediaStreamTrack返回enabled = true和readyState = live 。然而，没有videoinput（只是一个黑色的video面板，Chrome浏览器标签中的红色“录制”图标没有出现）。如果我稍后再检查MediaStreamTrack，我发现readyState now =“ ended ”（虽然启用仍然成立）。在FireFox中，find了设备，但是使用getUserMedia连接到它的任何尝试都会触发错误callback，并带有HARDWARE_UNAVAILABLE错误。我的getUserMedia调用很简单： navigator.getUserMedia({ audio: false, video: true }, _webRTCsuccessCallback, _webRTCerrorCallback); 我的成功callback是（包括一些testing代码立即检查MediaStreamTrack和一秒钟后）： function _webRTCsuccessCallback(stream) { window.stream = stream; // stream available to console if (window.URL) { _video.src = window.URL.createObjectURL(stream); } else { _video.src = […]

注意DOM的变化，优雅的方式: 我需要注意特定DOM元素的任何子元素的属性更改。到目前为止，我一直在使用突变事件。问题是 – 他们是越野车：例如在铬， DOMAttrModified没有被解雇，但DOMSubtreeModified是。这个问题很容易解决：因为根据规范，如果任何其他事件被触发， DOMSubtreeModified被触发，所以我只是听取了DOMSubtreeModified 。无论如何，在最近的版本中，如果一个属性被修改，Chromium会停止发射任何东西。然而，新的Mutation Observer API完美地工作。到目前为止，我只需要对某个特定元素的子树进行任何修改就发起一个callback – 仅仅因为没有别的东西会被改变 – 所以我通过使用突变事件和变异观察者（当可用时）来解决我的问题一段代码。然而，现在我需要对事件进行更强大的过滤（例如，在新节点上，在已删除的节点上） – 那么是否有一个库，可能是一个jQuery插件，这将允许我优雅地使用这两个 API – MutationObserver如果可用，则将突变事件作为回退，并具有针对特定事件types（例如添加的元素，属性更改）进行筛选的function。例如 $("#test").watch({onNewElement: 1}, function(newElement){}) $("#test").watch({onNewAttribute: 1}, function(modifiedElement) {}) 或者没有jQuery watchChanges("#test", {onNewElement: 1}, function(newElement){}) watchChanges("#test", {onNewAttribute: 1}, function(modifiedElement){})

数据属性的CSSselect器比类select器更快吗？: 几个月前这篇文章指出，网站开发实际上可以避免所有的类。我的问题是，数据select器与类select器相比有多高效？一个简单的例子就是比较元素与data-component='something'与元素class='class1 class2 something anotherClass' 。 [data-<attr>='<value>']select器将检查整个值与应该分割的类string。考虑到这一点，数据属性应该更快。所以，为了改进这个问题，在CSS的情况下，我们最好使用类select器还是数据select器？从javascript的angular度来看， jQuery("[data-component='something']")比jQuery(".something")更有效率吗？

HTML：表单之外的“标签”的最佳标签: 你会用什么HTML标签来获取这种信息：名字：约翰年龄：40岁城市：法兰克福国家：德国状态：有效我喜欢在这里使用p标签中的<label>标签，这听起来像很好的语义。但是，这些信息不在表格内。 W3C表示： label: The label element represents a caption for a form control. 那我该用什么呢？我可以明确地使用<strong> ，但是这没有“强烈的重要性”，并且不正确。 UPDATE 在注意到“定义列表”的build议之后，我想问一下，如果我在同一页面上有几条这样的信息，这样做还是最好的吗？这将意味着我用几次不同的“定义”来定义“名称”。例如：名字：约翰年龄：40岁城市：法兰克福国家：德国状态：有效名字：玛丽亚年龄：30岁城市：波恩国家：德国状态：无效 <dl>仍然是最好的方法吗？

Youtube自动播放不适用于embedded式HTML5播放器的移动设备: 对于我的问题，我有一个链接<a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a> 。我想通过点击fancybox覆盖窗口中的链接播放video。这不是问题。问题是参数，例如“自动播放”或“自动隐藏”。以下链接不起作用： <a href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a> Overlay-Window打开，但video不能自动播放。编辑：我想在移动设备上使用HTML5播放器。在桌面浏览器上，它使用参数，但不在移动设备上。

JavaScript加载图像的进度: JS中有一种方式来获取图像加载时的加载图像的进度？我想使用HTML5的新Progress标签来显示加载图片的进度。我希望有这样的事情： var someImage = new Image() someImage.onloadprogress = function(e) { progressBar.value = e.loaded / e.total }; someImage.src = "image.jpg";

我可以从canvas元素获取图像，并在img src标签中使用它？: 有没有可能将图像转换成由img src表示的图像？我需要在一些转换之后裁剪图像并保存。有一个视图函数，我在互联网上find像： FileReader()或ToBlop() ， toDataURL() ， getImageData() ，但我不知道如何在JavaScript中正确实现和使用它们。这是我的html： <img src="http://picture.jpg" id="picture" style="display:none"/> <tr> <td> <canvas id="transform_image"></canvas> </td> </tr> <tr> <td> <div id="image_for_crop">image from canvas</div> </td> </tr> 在JavaScript中，它应该看起来像这样： $(document).ready(function() { img = document.getElementById('picture'); canvas = document.getElementById('transform_image'); if(!canvas || !canvas.getContext){ canvas.parentNode.removeChild(canvas); } else { img.style.position = 'absolute'; } transformImg(90); ShowImg(imgFile); } function transformImg(degree) { […]

表列，用CSS设置最小和最大宽度: 我想有一个在列中可以伸展的表格，但是我在CSS中的最小和最大宽度有点麻烦。这似乎也有一些相互矛盾的答案围绕如何工作：最小/最大宽度应该工作：防止重叠表td宽度的文本最小/最大宽度不受支持：表格属性的最小宽度和最大高度我想有以下几点 table{ width:100%; } .a, .b, .c { background-color: red; } .a { min-width: 10px; max-width: 20px; } .b { min-width: 40px; max-width: 45px; } .c { } <table> <tr> <td class="a">A</td> <td class="b">B</td> <td class="c">C</td> </tr> </table> 有没有一种方法来实现这个没有JavaScript （即约束拉伸与列表）？我只需要这个使用CSS3 + HTML5 一个jsfiddle东西不扩大： http : //jsfiddle.net/4b3RZ/10/ 如果我只设置列的最小宽度我得到一个成比例的拉伸： http […]