我在mysite.com上有一个页面,它使用iframe从subdomain.mysite.com中提取内容.我正在使用iframe-resizer脚本(https://github.com/davidjbradshaw/iframe-resizer)来确保iframe的高度始终与其内容的高度相匹配.像魅力跨浏览器/操作系统一样工作.
在iframe中是一个带有客户端验证的长格式.如果用户尝试提交表单并且它没有完全验证,我使用scrollTo(在iframe内的表单页面上)将页面滚动到表单的顶部,在表单中显示详细的错误消息.这一切都适用于桌面浏览器(Mac和Windows)以及所有Android设备 - w/r/t scrollTo滚动到iframe中表单的顶部.
但是,在iOS上,它不起作用 - 滚动到iframe内部的窗体顶部不会发生.我已经读过,自2011年以来,你需要在iOS上打开iframe滚动的能力 - 我不确定这样做是否能解决我的问题.我读到了添加style ="overflow:auto; -webkit-overflow-scrolling:touch;" 到围绕iframe的div,并尝试了这个,但它没有任何影响.
我还不知道我是否找不到合适的解决方案让它在iOS中运行,或者如果在iOS上没有办法让scrollTo在iframe内部工作.思考?
我正在尝试删除或隐藏我的WooCommerce结帐页面顶部的添加到购物车消息(我已删除购物车页面,因此此消息显示在结帐页面上).我尝试将其添加到我的CSS中:
.woocommerce-message {display: none;}.
Run Code Online (Sandbox Code Playgroud)
虽然这隐藏了我想要的添加到购物车消息,但它也隐藏了优惠券应用消息,我不想隐藏它.
接下来,我尝试了functions.php文件中Business Bloomer博客的代码片段:
// Removes Product Successfully Added to Cart
add_filter( 'wc_add_to_cart_message', 'custom_add_to_cart_message' );
function custom_add_to_cart_message() {
echo '<style>.woocommerce-message {display: none !important;}</style>';
}
Run Code Online (Sandbox Code Playgroud)
这隐藏了文本,但是应用于div的类的样式.woocommerce-message仍然是可见的,包括背景颜色,填充等等.所以我在页面顶部留下了一个矩形,里面没有文字.
有关如何完全隐藏.woocommerce-messagediv只是为了添加到购物车消息,但不是.woocommerce-messag优惠券应用消息或任何其他消息的e div的任何想法将不胜感激!
我的搜索表单的当前HTML如下所示:
<form action=“/search/” method="post">
<input onclick="this.value='';" type="text" name="searchquery" id="searchbox" value="Search this site” class="swap_value" />
<input type="image" src=“/images/searchbutton.gif" id="searchbutton" alt="" />
</form>
Run Code Online (Sandbox Code Playgroud)
我想让搜索表格可访问.据我了解,从无障碍W3.org:https://www.w3.org/WAI/tutorials/forms/labels/和a11ymatters.com:http://www.a11ymatters.com/pattern/accessible-search/,我需要添加一个不会直观显示的标签,并为搜索按钮提供说明,如下所示:
<form action=“#” method="post">
<label class=“search-label” for=“search”>Search this site:</label>
<input onclick="this.value='';" type="text" name="searchquery" id="searchbox" value="Search this site” class="swap_value" />
<input type="image" src=“/searchbutton.gif" id="searchbutton" alt=“Search Button“ />
</form>
Run Code Online (Sandbox Code Playgroud)
添加CSS:
.search-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Run Code Online (Sandbox Code Playgroud)
W3.org文章说你可以使用label,aria-label或aria-labelledby来识别表单控件,但它没有说明哪种是最佳实践.有谁知道哪一个是首选/最佳实践?alt标签是否足以识别我的搜索按钮,或者是否需要标签呢?
非常感谢!