Tag: html5

选择项目或键入输入与列表中的项目匹配时，HTML5 datalist的jQuery事件: 我有如下数据列表 – 我想要的是，当一个项目被完全输入时（例如在用户完全键入“Adnan1”时输入框中）或从列表中选择，那么我想要一个事件。我尝试了几种方法，但到目前为止两种方法都没有帮助我。方法是 – $(“#name”).change(function(){ console.log(“change”); } 问题是，当输入失焦时，事件才会被触发，即当我点击屏幕中的某个位置时。我也试过了 $(“#name”).bind(‘change’, function () { console.log(‘changed’); }); 但每次输入时都会触发回调。实际上，当完全选择项目时，我需要进行AJAX调用。通过输入或从下拉列表中选择。第一种方法对于用户的观点是不好的，因为他必须进行额外的点击，而第二种方法的缺点是每个字母都会触发一个事件。我想要的只是当用户做出选择或输入完整句子时的事件。有没有办法实现这个目标？我遗失的任何事件都可以解决我的问题。

HTML5拖放effectAllowed和dropEffect: 这两个属性之间的关系似乎是一些混乱的根源。基于读取MDN站点和MSDN，我以为我已经弄明白了，但现在我不确定…. 我想当拖动一个元素时，你可以指定允许它发生的事情（即它可以移动，复制，链接到 – effectAllowed常量之一）。这是effectAllowed属性。不同的放置目标会做不同的事情，所以当你开辟另一个元素时，它可以控制在drop上发生的“效果”，这就是“dropEffect”属性。所以我设置了一个简单的例子来测试这个理论。的jsfiddle $(“[draggable=’true’]”).on(“dragstart”, function(e) { var dt = e.originalEvent.dataTransfer; dt.effectAllowed = “copyMove”; dt.setData(“text/plain”, “Foo”); }); $(“#dropZoneCopy”).on(“dragover”, function(e) { var dt = e.originalEvent.dataTransfer; dt.dropEffect = “copy”; e.preventDefault(); }); $(“#dropZoneMove”).on(“dragover”, function(e) { var dt = e.originalEvent.dataTransfer; dt.dropEffect = “move”; e.preventDefault(); }); 我有一个用户可以拖动的框 – 允许的效果是“copyMove”。我有一个框设置dropEffect复制，一旦设置dropEffect移动。我期望的是，当用户拖过“复制框”时，光标将改变以指示将发生复制，因为我在“移动框”上拖动光标变化以指示移动… 只有Chrome的行为符合我的预期。这是因为其他浏览器是错误的还是因为我不了解规范。好吗？更新来自摆弄这个的更多信息。 […]

使用带有HTML5的用户麦克风录制音频: 我非常接近完成了我的一个小项目，但是，我遇到了一个我似乎无法自己解决的小问题。我最终想要做的是从用户麦克风录制用户的语音，然后在完成后将录音上传到我的服务器。我正在使用此项目的代码： https ： //github.com/cwilso/AudioRecorder 它工作得很好，但我需要添加一个不包含开箱即用的function。记录完成后，我需要能够将文件上传到我的服务器。使用默认代码，该文件可以本地下载到我的计算机，但不能上载。所以我做了一些研究，我遇到了另一个具有上传function的类似项目。然而，在我看来，项目的其余部分更加错误。所以我尝试添加以下项目中的“上传代码”： https ： //github.com/nusofthq/Recordmp3js Javascript代码： function uploadAudio(mp3Data){ var reader = new FileReader(); reader.onload = function(event){ var fd = new FormData(); var mp3Name = encodeURIComponent(‘audio_recording_’ + new Date().getTime() + ‘.mp3’); console.log(“mp3name = ” + mp3Name); fd.append(‘fname’, mp3Name); fd.append(‘data’, event.target.result); $.ajax({ type: ‘POST’, url: ‘upload.php’, data: […]

物理仪表板/状态板的库和伪代码: 好吧，所以我昨天为办公室购买了一个46英寸的屏幕，并且即将被指控设置“精心制作的世界杯拖延计划”的风险，我最好向同事们展示它的意义;）看看我简单的草图，以及我受到启发的这些伟大的项目，我想得到以下的一些意见：骨架的伪代码：由于某些方法应该每24小时调用一次（“标题中的今天日期”），其他方法每隔60秒调用一次（“Twitter结果”），使用JavaScript（jQuery）和PHP的好方法是什么？编辑：Alsciende：我同意＃1和＃8太模糊了。因此，我删除＃8并尝试澄清＃1：使用“伪代码为骨架”，我基本上意味着这可以完全使用JavaScript定时器完成，你将如何设置各种定时器？ Google Analytics图书馆：哪些图书馆支持Google AnalyticsAPI，可以生成整齐的图表。最好是HTML5，基于JavaScript的Protovis 。推特图书馆：您建议使用哪些图书馆从个人资料中获取推特搜索结果和最新推文。排版/ CSS / HTML5的图书馆：尝试在这个过程中学习一些HTML5等，请建议任何其他可能相关的排版/ CSS库。刮痧/解析？我将举一个具体的例子：试着从这家餐厅的网站上获取今天的菜单，你会怎么做？（这是瑞典语 – 但你明白了 – 对不起;））实时统计数据？我正在使用WordPress的WassUp插件来跟踪我们网站上的实时访问者。其他日志记录软件（AWStats等）也可能安装在网络服务器上。有关如何从这些信息中提取信息并在仪表板上实时显示的任何想法？浏览器选择？你会选择哪种浏览器和操作系统？稳定，全屏，HTML5。 alt text http://sofzh.miximages.com/php/www.freeimagehosting.net

在Twitter Bootstrap中实现下拉菜单背后的想法是什么？: 我一直在看Twitter的Bootstrap框架，我真的很感动。但是，我不理解下拉导航菜单工作方式背后的想法。首先，为了查看子链接，您必须单击父链接。我可以看到这样做的好处，但为什么不将hover方法更传统的下拉列为默认值呢？其次，Twitter Bootstrap的下拉菜单背后的想法似乎照亮了父页面。我可能没有那么好解释……说，你有一个简单的网页结构：家关于团队服务网页设计主机域联系在传统的下拉菜单结构中，您将鼠标hover在“约”和“服务”上，并且会出现包含子链接的下拉菜单（例如“网页设计”，“托管”等）。但是，您也可以单击父页面（即“关于”和“服务”）并访问它们。使用Bootstrap，您不能在结构中拥有父页面，您必须使用锚标记（“＃”）。单击此按钮后，您将在下拉列表中看到这些页面。如果有父页面，这是不好的。从语义（“＃”是什么意思？）和可访问性（javascript关闭，屏幕阅读器等）的观点来看，它也不是很好。我可能错过了一些东西，但是有人可以解释这背后的想法，特别是关于父页面和语义html /可访问性吗？

jQuery-pjax vs history.js在单击时加载特定内容: 我需要ajaxify我的网站，例如加载微调器或某些内容，以便在单击链接时在页面中呈现特定内容。我找到了2个好的jQuery插件。 https://github.com/defunkt/jquery-pjax https://github.com/browserstate/history.js 他们的主要区别是什么？他们似乎在做同样的工作。好吧，也许一个使用ajax然后返回html（pjax），一个使用所谓的html5推送状态或其他东西。还有其他办法吗？（更简单或仅使用jQuery）我认为使用这些插件中的任何一个都太过分了（但我不确定是否有更简单的方法）。

jQuery，html5，append（）/ appendTo（）和IE: 如何复制：创建一个html5页面。确保添加了remysharp.com/2009/01/07/html5-enabling-script/中的脚本，以便IE注意到这些标记。创建一个硬编码的标记。使用jQuery 1.3.2，附加另一个section标签： $(‘#anything’).append(‘ ‘); 到目前为止，一切都适用于所有浏览器。重复上一步。 $(‘#whatever’).append(‘ ‘); 这是IE6 / 7失败的地方。 Firefox / Safari将继续工作。错误思考可能是IE6 / 7无法处理HTML5部分标记。我这样说是因为当我将步骤4从更改为，IE6 / 7将开始工作。如果我使用document.createElement()并创建我的新元素，它可以工作，但似乎jQuery的append()与html5元素有问题。

contentEditable字段，用于在数据库输入时维护换行符: 我有一个div属性contentEditable设置。这允许我有一个自由格式的可编辑textarea，而不需要任何表单输入字段： http ： //jsfiddle.net/M8wx9/8/ 但是，当我创建几个新行并单击“保存”按钮时，我使用.text()方法获取内容，该方法继续删除我刚刚输入的换行符。如果可能的话，我需要维护换行符，并将内容作为纯文本存储在数据库中。我可以使用.html()而不是.text()将HTML直接存储到数据库中，但我不喜欢这个想法，因为我可能需要将此数据提取为未来的纯文本。此外，在Firefox中按Enter键会打破新的行，Chrome和Safari正在打破 … ，Internet Explorer和Opera正在使用段落 … 线条，所以听起来很难解析html。如何保留这些换行符并将内容作为纯文本存储在数据库中（类似于textarea的方式）？最诚挚的问候， ns

jQuery HTML5文件拖放: 我已经看了很多脚本，用于通过拖放式AJAX将图像上传到服务器。我找到的脚本不是jQuery，非常大，并没有完全按照我的意愿行事。将来它应该使用jQuery，AJAX和PHP上传图像。我的问题在许多示例中，我查看了e.dataTransfer.files的工作。在我的情况下，它没有。我需要以某种方式绑定它吗？我想尽可能多地使用jQuery。的jsfiddle 尽情玩耍…… http://jsfiddle.net/AMjEz/ 码 #dropzone { border: 2px dashed #ccc; width: 300px; height: 200px; } jQuery(document).ready(function($) { $(‘#dropzone’).on({ dragenter: function(e) { $(this).css(‘background-color’, ‘lightBlue’); }, dragleave: function(e) { $(this).css(‘background-color’, ‘white’); }, drop: function(e) { e.stopPropagation(); e.preventDefault(); console.log(e.dataTransfer.files); } }); }); Drop files here

根据鼠标移动移动div的每个字符: 我正在开发一个网站，我不知道如何创建一个如下所示的javascript动画：我有一个div ，上面有一些文字，当用户将鼠标移到这个文本上时，我希望每个角色彼此独立移动，以便与它保持一定的距离（鼠标）。此外，我希望这个动画有旋转，但现在并不重要。这是一个图像说明：这是我到目前为止所做的： HTML： Hello World 使用Javascript： var chars = $(“.div1″).html().split(”); $(“.div1″).empty(); for(var i = 0; i < chars.length; i++){ $(".div1").append("”+chars[i]+””); } 的jsfiddle 有人能帮我实现这个效果吗？我不知道如何继续，没有帮助我的网站或答案。您可以使用jQuery或纯JavaScript，但请保持简单！谢谢。