小编cra*_*tik的帖子

当使用HTML5属性来标记具有必填字段的表单时,Firefox中的JAWS 14(以及可能的其他人)在用户第一次关注它们时(即用户第一次遇到该字段时)将空字段宣布为"无效条目".

<input type="text" required value="">

使用aria-required="true"避免讨厌的消息(并且JAWS仍然通知用户该字段是必需的),但是您丢失了HTML5表单验证功能(阻止表单提交,浏览器生成的工具提示以指导用户等).

1. 你怎么能绕过"无效录入"公告？
2. 为什么JAWS会这样做？
   如果用户跳过它(将其留空,因此无效),我会理解将字段描述为"无效",然后再次关注它.当前的实现令人困惑,因为用户被告知他们在他们甚至不知道存在的字段中输入了错误.

我已经读过aria-invalid用JavaScript设置愚弄JAWS的黑客攻击,但我真的想避免focus在有很多输入的页面上的每个字段上观察用户交互(事件等).目前我使用<label>Label text <span style="display:none;">required field</span></label>但这是一个非常hacky,非语义的解决方案(更不用说我失去了HTML5的好处required).

默认情况下,当使用缓存清单时,浏览器还将缓存当前(HTML)页面.我怎么不这样做？

我的网站看起来像domain.com/在地址栏,但它实际上是服务domain.com/index.php.我试过了:

NETWORK
/
*

和

NETWORK
/index.php
*

...和index.html,index.php等没有前导斜杠的变体等等(否则清单工作正常 - 它正确缓存CACHE:标题下列出的一些文件,它正在以正确的MIME类型提供服务等. )

Web字体往往分为单独的文件,用于粗体,斜体等.我正在使用这样的@font-face声明(仅针对此示例修剪为WOFF):

@font-face {
    font-family: 'OpenSans';
    src: url("fonts/OpenSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansItalic';
    src: url("fonts/OpenSans-Italic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url("fonts/OpenSans-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

然后我实现了各种风格:

body {
    font-family: "OpenSans", Helvetica, sans-serif;
}

strong {
    font-family: "OpenSansBold", Helvetica, sans-serif;
    font-weight: normal; /* Web font is already bold */
}

em {
    font-family: "OpenSansItalic", Helvetica, sans-serif;
    font-style: normal; /* Web font is already italic */
}

我必须覆盖UA的粗体/斜体样式(上面的注释行).否则,它将为文本添加一个非常难看的虚假粗体/斜体外观. …

我正在寻找一种可访问的方式来定义字段是否接受整数或小数.输入字段有两种类型:一个简单<input>表示十进制值(美元和美分),一个<input>表示尾部".00"表示需要整数(仅限美元).

例:

由于".00"不在其中,<label>因此屏幕阅读器将无法读取.我不得不使用丑陋的黑客来使其可访问:

<label>Total amount due ($): <span style="display:none;">Please enter dollars and cents</span></label>
<label>Amount owed ($): <span style="display:none;">Please enter a dollar amount</span></label>

(即使隐藏了跨度,当输入具有焦点时,JAWS将读取它.)

什么是更方便和语义的方式来通知辅助技术正在请求数字格式？

一些说明:

• 在我的情况下,如果我需要一个整数,允许用户输入"123.45",然后在服务器上将其四舍五入为"123"是不可接受的.
• 没有客户端验证,因此如果用户输入错误类型的值,页面将返回该字段上的描述性错误消息.
• 输入不能type="number"归因于浏览器插入的控件.

当执行某个用户操作时，我需要向表中添加一行，其中<input>每个单元格中都包含 。我需要<input>s 自动填充可用空间而不影响列宽。

我需要从这个开始：

最后是这样的：

但相反，当我插入输入时，每列都会拉伸到最小 ~170px（取决于浏览器）：

简化演示：http://codepen.io/patik/pen/qZXMyL \xe2\x80\x94 单击底部的按钮，并注意插入输入后原始列宽不会保留。

我可以在插入输入之前读取列宽，然后手动应用于max-width每个输入，但是我希望列保持流动（即列应继续调整以适合纯文本数据）。其他行可能会添加到表中或从表中删除，我需要输入进行相应调整。

正如您将在演示中看到的那样，我已经尝试创建一个<td><div><input></div></td>结构，希望 能够<div>填充列，并且<input>能够填充<div>，但情况似乎并非如此。

我更喜欢 CSS 解决方案（即使我需要在插入输入时应用内联样式），但如果 JavaScript 解决方案是唯一的选择，我也可以接受。

我想localStorage用来"缓存"一些主要在移动设备上使用的Web应用程序中的JS和CSS文件(即带宽限制).我认为它会像这样工作:

1. 页面加载一个小的setup.js包含代码,用于检查先前localStorage是否bigScriptFile.js已存储过.
   1. 如果未存储,bigScriptFile.js则下载并存储以供下次访问.
   2. 如果它已经存储,则bigScriptFiles.js从中读取localStorage并加载/运行,就像它像普通文件一样下载(即<script src="http://example.com/bigScriptFile.js"></script>)

我不确定该怎么做的是步骤1.1 - 存储JS文件.(我知道我只能存储字符串localStorage,我知道如何使用JSON.stringify().)

当然,它并不像使用escape()那样简单:
localStorage.setItem('bigScriptFile', escape('myJScode'))存储和
unescape(localStorage.getItem['bigScriptFile'])检索时

即使这很容易,我如何使用JS将bigScriptFile.js的内容作为字符串获取？也许通过对返回内容的PHP脚本进行ajax调用？

我试图修剪字符串中的前导和尾随空格和换行符.换行符写为\n(两个单独的字符,斜杠和n).换句话说,它是一个字符串文字,而不是CR LF特殊字符.

例如,这个:

\n \nRight after this is a perfectly valid newline:\nAnd here is the second line. \n

应该成为这样的:

Right after this is a perfectly valid newline:\nAnd here is the second line.

我想出了这个解决方案:

text = text
        .replace(/^(\s*(\\n)*)*/, '') // Beginning
        .replace(/(\s*(\\n)*)*$/, '') // End

根据RegexPal,这些模式匹配得很好.

但是,第二个模式(匹配字符串的结尾)需要很长的时间 - 在Chrome上只需要几个段落和一些尾随空格的大约32秒.第一个模式在同一个字符串上非常快(毫秒).

这是一个CodePen来演示它.

为什么这么慢？有没有更好的方法来解决这个问题？

我react-select用来允许用户选择他们的出生年份。如果用户已经填写过，它将被预设为某个值，例如1950。输入显示正确的值，但是当打开菜单时，它将滚动到顶部并显示最近的年份（2018、2017， 2016等）。

如何将其向下滚动至1950，并默认突出显示该项目？

我的代码：

class YearPicker extends React.PureComponent {
    options = [
        {label: 2018, value: 2018},
        {label: 2017, value: 2017},
        // ...
        {label: 1950, value: 1950},
        {label: 1949, value: 1949},
        // ...
    ]

    render () {
        return (
            <Select
                options={this.options}
                value={this.props.value}
            />
        )
    }
}

CodeSandbox —默认应为2002。选择一个值（2002或其他方式）后，它可以正常工作，但是当页面首次加载时，您必须在菜单中向下滚动以找到该值。

每对文档我曾尝试value和defaultValue并selectedOption，但似乎没有任何工作。我通过利用onMenuOpen渲染后找到正确的DOM元素然后滚动到它来创建一个非常棘手的解决方法，但是这破坏了箭头键的功能。