天道酬勤,学无止境

制作/查找html5验证器书签(Making/finding html5 validator bookmarklet)

问题

我想找到或制作一个书签,该书签将使用W3C HTML 5验证程序来验证当前查看页面的html内容。

我发现了两个小书签,并且试图使一个小书签的行为有点像另一个小书签的行为,但是我不确定如何做到这一点。

Chris Coyier拥有一个HTML5验证书签,除了使用页面URI之外,它都能很好地工作,因此不适用于本地测试的网站:

javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each%20%hh,%20convert%20/%20to%20\%20and%20|%20to%20:%20*/%20%20u%20=%20u.substr(windows%20?%208%20:%207);%20u%20=%20unescape(u);%20if(windows)%20{%20u%20=%20u.replace(/\//g,"\");%20u%20=%20u.replace(/\|/g,":");%20}%20return%20u;%20}%20/*%20bookmarklet%20body%20*/%20var%20loc,fileloc;%20loc%20=%20document.location.href;%20if%20(loc.length%20>%209%20&&%20loc.substr(0,8)=="file:///")%20{%20fileloc%20=%20fixFileUrl(loc);%20if%20(prompt("Copy%20filename%20to%20clipboard,%20press%20enter,%20paste%20into%20validator%20form",%20fileloc)%20!=%20null)%20{%20document.location.href%20=%20"http://validator.w3.org/file-upload.html"%20}%20}%20else%20document.location.href%20=%20"http://validator.w3.org/check?uri="%20+%20escape(document.location.href);%20void(0);%20})();

我也找到了这个,可以通过抓取当前页面的html来工作,但是我不知道如何使它成为html5 ...代码中引用了doctype,并且我尝试将其更改为html5, html500等,并将其完全删除,希望可以自动检测..但无济于事:

javascript:(function(){var h=document;var b=h.doctype;var e="<!DOCTYPE "+b.name.toLowerCase()+' PUBLIC "'+b.publicId+'" "'+b.systemId+'">\n';var g=h.documentElement.outerHTML;var f="http://validator.w3.org/check";var i={prefill_doctype:"html401",prefill:0,doctype:"inline",group:0,ss:1,st:1,outline:1,verbose:1,fragment:e+g};var a=h.createElement("form");a.setAttribute("method","post");a.setAttribute("target","_blank");a.setAttribute("action",f);for(var j in i){var c=h.createElement("input");c.setAttribute("type","hidden");c.setAttribute("name",j);c.setAttribute("value",i[j]);a.appendChild(c)}if(navigator.appCodeName=="Mozilla"){h.body.appendChild(a)}a.submit()})();
回答1

首先,您需要HTML文档的精确副本(包括Doctype等)。 为此,我编写了以下函数:

function DOMtoString(document_root) {
    var html = '',
        node = document_root.firstChild;
    while (node) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                html += node.outerHTML;
            break;
            case Node.TEXT_NODE:
                html += node.nodeValue;
            break;
            case Node.CDATA_SECTION_NODE:
                html += '<![CDATA[' + node.nodeValue + ']]>';
            break;
            case Node.COMMENT_NODE:
                html += '<!--' + node.nodeValue + '-->';
            break;
            case Node.DOCUMENT_TYPE_NODE:
                // (X)HTML documents are identified by public identifiers
                html += "<!DOCTYPE "
                     + node.name
                     + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
                     + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
                     + (node.systemId ? ' "' + node.systemId + '"' : '')
                     + '>\n';
            break;
        }
        node = node.nextSibling;
    }
    return html;
}

然后,必须创建并提交表单。 在检查了提交到http://validator.w3.org/check的表单之后,我创建了以下函数,该函数提交了重要的键值对:

javascript:(function() {
    var html_to_validate = DOMtoString(document);

    /* Paste the DOMtoString function here */

    function append(key, value) {
        var input = document.createElement('textarea');
        input.name = key;
        input.value = value;
        form.appendChild(input);
    }
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = 'http://validator.w3.org/check';
    form.enctype = 'multipart/form-data';         // Required for this validator
    form.target = '_blank';                       // Open in new tab
    append('fragment', html_to_validate);         // <-- Code to validate
    append('doctype', 'HTML5');                   // Validate as HTML 5
    append('group', '0');
    document.body.appendChild(form);
    form.submit();
})();

书签

将前两个块复制到Google的闭包编译器中。 别忘了再次为javascript:加上前缀。

javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
回答2

我也收到了“抱歉! 该文档无法检查。” 错误,通过在表单属性中添加一个接受字符集“ utf-8”来解决。

在创建表单元素的函数中,添加以下行:form.acceptCharset =“ utf-8”;

它为我工作。

回答3

玛塔的回答帮助了我。 这是更新的书签。

javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
回答4

以前的答案对我不起作用。 我正在使用https://validator.w3.org/nu/about.html上的“检查当前页面的序列化DOM”书签。 拾取动态生成的HTML似乎效果很好。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Making/finding html5 validator bookmarklet
    I want to find or make a bookmarklet that will validate the html content of a currently viewed page using the W3C HTML 5 validator. I have found two bookmarklets and am trying to get one to behave a bit like one and a bit like the other, however I am not sure how to do this. Chris Coyier has an HTML5 validation bookmarklet that works well except it uses the page URI so does not work for locally tested sites: javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each
  • 如何更改HTML5中视频的播放速度?(How to change the playing speed of videos in HTML5?)
    问题 如何更改HTML5中的视频播放速度? 我已经在w3school中检查了视频标签的属性,但无法解决。任何帮助,我们将不胜感激! 回答1 根据此站点的说法,可以通过DOM访问的defaultPlaybackRate和defaultPlaybackRate属性支持此playbackRate 。 例子: /* play video twice as fast */ document.querySelector('video').defaultPlaybackRate = 2.0; document.querySelector('video').play(); /* now play three times as fast just for the heck of it */ document.querySelector('video').playbackRate = 3.0; 以上适用于Chrome 43 +,Firefox 20 +,IE 9 +,Edge 12+。 回答2 只需输入 document.querySelector('video').playbackRate = 1.25; 在现代浏览器的JS控制台中。 回答3 javascript:document.getElementsByClassName("video-stream html5-main-video")[0]
  • 禁用HTML5表单元素的验证(Disable validation of HTML5 form elements)
    问题 在我的表单中,我想使用新的HTML5表单类型,例如<input type="url" /> (有关此处类型的更多信息)。 问题在于Chrome希望对我有帮助,并为我验证这些元素,除了它会吸引人。 如果未通过内置验证,则该元素不会成为焦点,否则不会显示任何消息或指示。 我用"http://"预填充URL元素,因此我自己的自定义验证只是将这些值视为空字符串,但是Chrome拒绝了。 如果我可以更改其验证规则,那也可以。 我知道我可以恢复使用type="text"但我希望使用这些新的类型提供的增强功能(例如:它会自动切换到移动设备上的自定义键盘布局): 因此,有没有办法关闭或自定义自动验证? 回答1 如果要禁用HTML5中表单的客户端验证,请向表单元素添加novalidate属性。 前任: <form method="post" action="/foo" novalidate>...</form> 参见https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate 回答2 我已阅读该规范并在Chrome中进行了一些测试,如果您发现“无效”事件并返回false,则似乎可以提交表单。 我正在使用带有此HTML的jquery。 // suppress "invalid" events on URL
  • iOS6-删除了iPad的控制台日志-如何在Windows上使用Web检查器?(iOS6 - removed console log for IPad - how to use web inspector on windows?)
    问题 所以iOS6出来了,哎呀。 现在,好像苹果已经删除了Safari中曾经存在的“开发者控制台”。 太好了,我听到很多人说-这是有限的。 但是,它可以在设备上运行-现在显然您必须将设备连接到Mac才能获得Web检查器? 这是使用控制台进行调试的唯一方法吗? Safari是否可以使用Windows进行调试? 请注意,我的意思不是仅更改用户代理,您可以在Safari Windows上执行此操作-不注册触摸事件-只需单击即可。 回答1 如果您没有Mac OSX,则可以将此脚本用作控制台替换: https://github.com/robotnic/waterbug 它显示错误消息,可以记录所有类型的变量,您必须将iPhone或iPad右移90°才能打开控制台。 回答2 一个穷人的调试控制台: try { var test = document.do.something(); } catch (exc) { alert(exc); } 回答3 一个可以调试通过使用书签小(尤其是内移动Safari)在设备上。 如果错误仅在设备上实时显示,而在其他任何地方都没有,则在设备上进行调试可能非常重要。 开发人员可以使用各种书签,因此请选择所需的工具(例如Firebug Lite),将其添加到书签中,然后在需要的地方使用它。 这可能不是开发人员控制台,但是它是一种调试更加准确且面向工作的方法。
  • 分享996个实用的JavaScript特效你要的全在这里
    链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效,总有一款适合你,小弟在某付费网站上收集的,虽然不是我的原创但是小弟这996个Js也是花了很多时日!下面是JS的名字,我放了一些图片,所有图片全都放进去是不行的996个图太多,大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围日期插件 点击卡片全屏打开css3特效 人物遥控无人机CSS3动画 css3 svg仿微信加载框代码 水面上的月亮CSS3动画特效 不规则抽象彩带HTML5动画 Canvas透明丝带飘动特效 js点击弹窗弹出登录框代码 原生js轮播图自动切换代码 css3手机音乐播放器ui布局 CSS3天气预报APP应用UI界面 纯CSS3卡通甜甜圈动画特效 css3 hover悬停图片显示描述代码 HTML5 Canvas星星笑脸动画 HTML5 SVG叶子飘落动画特效 HTML5 Canvas射线能量光圈动画 js时钟带文本标签月份和星期 CSS3电子结算单折叠显示特效 HTML5 Canvas圆点波浪动画 纯CSS3绘制黑色小萌猫特效 CSS3五星红旗国庆节庆祝动画特效 H5
  • 具有模式的HTML5电话号码验证(HTML5 phone number validation with pattern)
    问题 我正在使用HTML5表单验证来验证来自印度的电话号码。 来自印度的电话号码长10位数字,以7、8或9开头。 例如: 7878787878 9898989898 8678678878 这些电话号码有效,但是 1212121212 3434545464 6545432322 是无效的。 建议一种可以检测有效的印度电话号码的模式。 到目前为止,我的模式是[0-9]{10} ,但是它不会检查第一个数字是7、8还是9。 回答1 这个怎么样? /(7|8|9)\d{9}/ 首先查找7或8或9,然后是9位数字。 回答2 怎么样 <input type="text" pattern="[789][0-9]{9}"> 回答3 试试下面的代码: <input type="text" name="Phone Number" pattern="[7-9]{1}[0-9]{9}" title="Phone number with 7-9 and remaing 9 digit with 0-9"> 该代码将仅以以下格式输入: 9238726384(以9或8或7开头,其他9位使用任何数字) 8237373746 7383673874 格式错误: 2937389471(不以9或8或7开头) 32796432796(超过10位) 921543(少于10位数字) 回答4 印度的正则表达式验证应确保使用+91
  • HTML5文档类型定义在哪里?(Where is the HTML5 Document Type Definition?)
    问题 “旧的” HTML / XHTML标准为它们定义了DTD(文档类型定义): HTML 4.01 http://www.w3.org/TR/html401/sgml/dtd.html XHTML 1.0 http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict 此DTD指定嵌套元素的规则-“哪些类型的元素可能出现在哪些类型的元素中”。 我在这里为XHTML 1.0制作了一个图表(对不起,我不再拥有该资源) 我想用一个新版本来更新该图,该新版本还包括新的HTML5元素。 但是,似乎没有HTML5 DTD。 看来嵌套规则是由HTML5中定义的各种内容模型定义的。 所以没有DTD,对吗? 后续问题: HTML5中没有DTD的原因吗? DTD是为所有不同类型的元素定义嵌套规则的好方法。 他们为什么不包括这样的东西? 更新:我发现了这一点:我猜这是http://www.w3.org/TR/html5/dom.html#kinds-of-content,这与拥有DTD最为接近。 更新: Visual Studio团队为XHTML5创建了XML架构。 我猜这回答了我的问题:http://blogs.msdn.com/b/webdevtools/archive/2009/11/18/html-5-intellisense-and
  • iOS远程调试(iOS Remote Debugging)
    问题 在最近发布的iOS版Chrome浏览器中,我想知道如何为Chrome iOS启用远程调试? 更新:随着iOS 6的发布,现在可以使用Safari进行远程调试。 回答1 更新: 这不再是最好的答案,请遵循格雷格斯的建议。 新答案: 使用Weinre。 旧答案: 现在,您可以使用Safari进行远程调试。 但这需要iOS 6。 这是http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector的快速翻译 通过USB将iDevice连接到Mac 在Mac上打开Safari并激活开发工具在您的iDevice上:转到“设置”>“ safari”>“高级”,然后激活Web检查器使用您的iDevice转到任何网站在Mac上:打开开发人员菜单,然后从iDevice(位于顶部Safari菜单)中选择网站。 正如Simons指出的那样,需要关闭私有浏览才能使远程调试工作。 设置> Safari>私人浏览>关 回答2 所选答案仅适用于Safari。 目前,无法在iOS上的Chrome中进行真正的远程调试,但是与大多数移动浏览器一样,您可以使用WeInRe进行一些简单的调试。 设置有点麻烦,但是可以让您检查DOM,查看样式,更改DOM并使用控制台。 建立: 安装nodejs npm install -g weinre weinre -
  • html5必需和jQuery Submit()(html5 required and jQuery submit())
    问题 我正在尝试将html5实现为表单,但是当我通过jquery提交表单并尝试使用html5“ required”属性时,我遇到了一个问题。 这是我的表格,非常简单: <form action="index.php" id="loginform"> <input name="username" required placeholder="username" type="text"> <a href="javascript:$('#loginform').submit();">Login</a> </form> 问题在于,当通过jquery提交表单时,它只是绕过了必需的属性。 我知道,仅当表单是由用户而不是脚本提交时,required应该才起作用,因此当我将锚点更改为Submit输入时,它就可以正常工作。 我的观点是,是否有一种方法可以强制jquery .submit()使用html5必需属性。 预先感谢您的回答 回答1 我做了以下 <form> ... <button type="submit" class="hide"></button> </form> <script> ... $(...).find('[type="submit"]').trigger('click'); ... </script> 有用! 回答2 你可以 在提交时触发click事件使用$("form")[0
  • 在javascript中获取文件大小(getting file size in javascript)
    问题 给定一个文件的路径,例如: C:\ file.jpg 如何在javascript中获取文件的大小? 回答1 如果它不是由具有完全访问权限的JavaScript驱动的本地应用程序,则无法仅从路径名获取任何文件的大小。 出于安全原因,运行javascript的网页无法访问本地文件系统。 如果要显示进度条,可以使用类似SWFUpload的性能下降的文件上传器。 HTML5也具有File API,但目前尚未得到广泛支持。 如果用户为input[type=file]元素选择文件,则可以从files集合中获取有关文件的详细信息: alert(myInp.files[0].size); 回答2 function findSize() { var fileInput = document.getElementById("fUpload"); try{ alert(fileInput.files[0].size); // Size returned in bytes. }catch(e){ var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var e = objFSO.getFile( fileInput.value); var fileSize = e.size; alert(fileSize); } } 回答3
  • 自定义元素是有效的HTML5吗?(Are custom elements valid HTML5?)
    问题 我一直无法找到关于自定义标记在HTML5中是否有效的明确答案,如下所示: <greeting>Hello!</greeting> 我在规范中一无所获: http://dev.w3.org/html5/spec/single-page.html 而且自定义标签似乎无法通过W3C验证器进行验证。 回答1 “自定义元素”规范在Chrome和Opera中可用,并且在其他浏览器中也可用。 它提供了一种以正式方式注册自定义元素的方法。 自定义元素是作者可以定义的新型DOM元素。 与无状态且短暂的装饰器不同,自定义元素可以封装状态并提供脚本接口。 自定义元素与模板,HTML导入和Shadow DOM一起是称为Web Components的更大W3规范的一部分。 Web组件使Web应用程序的创建者能够定义具有仅凭CSS所无法实现的视觉丰富度和交互性的小部件,并且易于编写和重用当今脚本库所无法实现的小部件。 但是,从Google Developers上这篇有关Custom Elements v1的出色演练文章中可以得出: 自定义元素的名称必须包含破折号( - )。 因此<x-tags> , <my-element>和<my-awesome-app>都是有效名称,而<tabs>和<foo_bar>则不是。 这项要求是为了使HTML解析器可以将自定义元素与常规元素区分开。
  • 我应该使用“名称”或“ id”制作HTML锚吗?(Should I make HTML Anchors with 'name' or 'id'?)
    问题 当您想使用“ http://example.com/#foo ”方法引用网页的某个部分时,应该使用 <h1><a name="foo"/>Foo Title</h1> 或者 <h1 id="foo">Foo Title</h1> 它们都起作用,但是它们是相等的还是语义上的差异? 回答1 根据HTML 5规范5.9.8导航到片段标识符: 对于HTML文档(和text / html MIME类型),必须遵循以下处理模型来确定文档的指示部分是什么。 解析URL,并让fragid作为URL的<fragment>组件。 如果fragid是空字符串,则文档的指示部分是文档的顶部。 如果DOM中有一个元素的ID刚好等于fragid,则树形顺序中的第一个此类元素是文档的指示部分; 在此处停止算法。 如果有一个是在具有名称属性,其值正好等于fragid DOM中的元素,然后在树顺序中的第一元件,例如是在文档的所指示的部分; 在此处停止算法。 否则,文档中没有指示的部分。 因此,它将查找id="foo" ,然后将其跟随到name="foo" 编辑:正如@hsivonen所指出的那样,在HTML5中, a元素没有名称属性。 但是,以上规则仍适用于其他命名元素。 回答2 你不应该使用<h1><a name="foo"/>Foo Title</h1>在HTML中的任何味道担任text/html
  • 如何判断浏览器是否处于“怪癖”模式?(How to tell if a browser is in “quirks” mode?)
    问题 假设您的页面具有相对严格的doctype和HTML标记,并且非常接近合规性,但是可能会以一些愚蠢的方式错过,这可能是因为用户内容超出了您的控制范围...表示您正在处理内容管理系统或内容管理系统的主题,您可以在其中控制一些基本结构并需要一些javascript,但对进入页面的其他所有内容不承担任何责任。 您如何知道(或:将由什么决定)浏览器何时决定进入“怪癖”模式而不是使用符合标准的引擎? 我正在寻找每种主要浏览器的答案,因为IE,Chrome,Safari和Firefox当然都将以不同的方式处理。 一个错误足以迫使它出错吗?还是您有一些回旋余地? 回答1 在Firefox和Opera中,您可以通过检查页面信息来确定浏览器是否处于“怪癖模式”。 使用document.compatMode ,将告诉您大多数浏览器所处的模式。 在Chrome,Safari和IE中,在地址栏中运行以下javascript: javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.') (请注意,由于最近的安全性更改,您需要在粘贴到地址栏中后重新输入javascript:部分) 回答2 正如您可以在JavaScript中查询呈现方式一样
  • 如何使用html5输入类型编号处理浮点数和小数点分隔符(How to handle floats and decimal separators with html5 input type number)
    问题 我正在构建主要用于移动浏览器的Web应用程序。 我使用数字类型的输入字段,因此(大多数)移动浏览器仅调用数字键盘以提供更好的用户体验。 此Web应用程序主要用于小数点分隔符是逗号而不是点的区域,因此我需要处理两个小数点分隔符。 如何用点和逗号覆盖整个混乱局面? 我的发现: 桌面版Chrome 输入类型=数字用户在输入字段中输入“ 4,55” $("#my_input").val(); 返回“ 455” 我无法从输入中获取正确的值 桌面版Firefox 输入类型=数字用户在输入字段中输入“ 4,55” $("#my_input").val(); 返回“ 4,55” 很好,我可以用点替换逗号并获得正确的浮点数 Android浏览器 输入类型=数字用户在输入字段中输入“ 4,55” 输入失去焦点时,值将被截断为“ 4” 给用户造成困扰 Windows Phone 8 输入类型=数字用户在输入字段中输入“ 4,55” $("#my_input").val(); 返回“ 4,55” 很好,我可以用点替换逗号并获得正确的浮点数 当用户可能使用逗号或点作为小数点分隔符并且我想将html输入类型保留为数字以提供更好的用户体验时,这种情况下的“最佳做法”是什么? 我可以将逗号转换为点播中的点,绑定键事件吗,它可以与数字输入一起使用吗? 编辑 Currenlty我没有任何解决方案
  • 使用JavaScript小书签,找到网页中所有“旧”实例,并将每个实例替换为“新”实例(Find all instances of 'old' in a webpage and replace each with 'new', using a javascript bookmarklet)
    问题 我想做的是用JS小书签或油脂猴子脚本中的“新”替换网页中“旧”的所有实例。 我怎样才能做到这一点? 我认为jQuery或其他框架还可以,因为有一些技巧可以将它们包含在小书签和油脂猴子脚本中。 回答1 防潮功能。 这意味着这将不会触摸任何标签或属性,而只会触摸文本。 function htmlreplace(a, b, element) { if (!element) element = document.body; var nodes = element.childNodes; for (var n=0; n<nodes.length; n++) { if (nodes[n].nodeType == Node.TEXT_NODE) { var r = new RegExp(a, 'gi'); nodes[n].textContent = nodes[n].textContent.replace(r, b); } else { htmlreplace(a, b, nodes[n]); } } } htmlreplace('a', 'r'); 书签版本: javascript:function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=element.childNodes;for
  • HTML5输入类型=数字更改步骤行为(HTML5 input type=number change step behavior)
    问题 如果我使用type =“ number”和step =“ 100”的输入字段。 我不希望奇数无效。 我只想将值增加或减少为1000。 <input type="number" min="100" max="999999" step="100" /> 如果用户输入值“ 199”并提交,则他/她将收到错误消息,因为该值不能被100整除。但是,我想要的步进值就是控制微调器的行为,例如,如果用户单击向上时,我希望值199变为200,如果他/她单击向下时,我希望其值变为100。或者理想情况下,我希望将值增大或减小为100。 我该怎么做呢? 我尝试使用无效事件(使用jQuery 1.7.2),如下所示: $( "[type='number']" ).bind( 'invalid', function( e ) { var el = $( this ), val = el.val( ), min = el.attr( 'min' ), max = el.attr( 'max' ); if ( val >= min && val <= max ) { return false; } } ); 但这导致表单未提交。 PS .:这是在Fedora 16上的Google Chrome 20.0.1132.57中。 回答1 我认为您无法做到, step和验证紧密地联系在一起。 将来
  • 为什么JS代码“ var a = document.querySelector('a [data-a = 1]');”? 导致错误?(Why does JS code “var a = document.querySelector('a[data-a=1]');” cause error?)
    问题 我在DOM中有一个元素: <a href="#" data-a="1">Link</a> 我想通过其HTML5自定义数据属性data-a获得此元素。 所以我写了JS代码: var a = document.querySelector('a[data-a=1]'); 但是此代码不起作用,并且在浏览器的控制台中出现错误。 (我测试了Chrome和Firefox。) JS代码var a = document.querySelector('a[data-a=a]'); 不会导致错误。 所以我认为问题在于HTML5的JS API document.querySelector不支持在HTML5自定义数据属性中查找数字值。 这是浏览器实现错误还是HTML5规范与document.querySelector相关的问题? 然后,我在http://validator.w3.org/上测试了以下代码: <!DOCTYPE html> <meta charset="utf-8"> <title>An HTML Document</title> <a href="#" data-a="1">Link</a> 他们已通过验证。 由于这些HTML5代码已经过验证。 我们应该可以使用HTML5的JS API document.querySelector通过其自定义数据属性来查找此锚点元素。
  • 现在可以使用有效的HTML5吗?(Is valid HTML5 OK to use now?)
    问题 我一直在阅读有关HTML5的文章,并希望开始使用其中的一些,尤其是数据集,因为我发现了一个有趣的jQuery插件,可以开始使用... http://www.barklund.org/blog/2009/08/28/html-5-datasets/ 现在,我知道像IE6这样的较旧的浏览器可能不喜欢在其中具有额外的属性,并且可能不知道如何处理它们,但是如果他们忽略它们,并且该站点仍使用HTML5验证器进行验证,那应该可以,不是吗? 我特别想确保不会因没有有效的标记而受到Google等的处罚,并且不会因为客户使用沼泽检查其网站而使客户抱怨其网站“无效”标准的W3C验证器。 人们对此有何看法? 回答1 我建议您查看Dive Into HTML 5,并自行决定是否可以权衡取舍。 据我所知,使用HTML 5不会对SEO产生负面影响。我只是在Dive Into HTML 5中运行了w3c验证程序,它自动检测到它是HTML 5并对其进行了验证,因此我认为也将是一个问题。 回答2 答案很简单: 还没有! 但是很快。 回答3 不,这不对。 有效的HTML5甚至是不可能的,因为该规范尚未准备好。 但是,您可以为更改准备HTML4。 第一步是开始使用有效的HTML4 strict和CSS。 规范中有一些稳定的部分,例如<canvas>标签。 <video>标签正在普及
  • 在提交Ajax之前进行HTML5验证(HTML5 validation before ajax submit)
    问题 这应该很简单,但是却让我发疯。 我有一个用ajax提交的html5表单。 如果输入的值无效,则会弹出一个提示您的信息。 在运行ajax提交之前,如何检查条目是否有效? 形式: <form id="contactForm" onsubmit="return false;"> <label for="name">Name:</label> <input type="text" name="name" id="name" required placeholder="Name" /> <label for="subject">Subject:</label> <input type="text" name="subject" id="subject" required placeholder="Subject" /> <label for="email">Email:</label> <input type="email" name="email" id="email" required placeholder="email@example.com" /> <label for="message">Message:</label> <textarea name="message" id="message" required></textarea> <input type=
  • HTML5电子邮件验证(HTML5 Email Validation)
    问题 据说“有了HTML5,我们就不再需要js或服务器端代码来检查用户输入的内容是否是有效的电子邮件或url地址” 用户输入后如何验证电子邮件? 如果没有使用JS,如果用户输入了错误的电子邮件地址,则如何显示消息。 <input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email"> <input type="submit" value="Submit"> 回答1 在HTML5中,您可以这样做: <form> <input type="email" placeholder="Enter your email"> <input type="submit" value="Submit"> </form> 并且当用户按Submit时,它会自动显示一条错误消息,例如: 回答2 www.w3.org网站的input type = email页面指出,电子邮件地址是与以下正则表达式匹配的任何字符串: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ 使用required属性和pattern属性来要求该值与正则表达式模式匹配。 <input type="text" pattern="/^[a-zA-Z0-9.!#$%&’*+