小编lav*_*ius的帖子

将 URL 中的图像加载到文件输入字段中

是否可以使用 JavaScript 将图像 URL 转换为<input type="file">准备提交的格式?或者达到类似的效果?实际上,我有图像,http://example.com/xxx/image.jpg我想将其“预加载”到使用注册表中,以便可以将其与表单一起提交,就像使用输入字段从磁盘加载一样。

案例场景是从 API 获取的用户数据,我想用它来填充用户注册表单,其中一个字段是用户的头像,API 将其作为 URL 移交。

这不是关于如何使用输入字段预览从磁盘中选择的图像!

javascript

8
推荐指数
1
解决办法
2万
查看次数

Chrome meta viewport-fit=cover 在带有显示切口的 android 上

使用viewport-fit=cover. Safari 将内容全屏拉伸到切口区域,而 Chrome 则没有(请参见下面华为 Y6 的屏幕截图)这是 Android 上的标准行为还是向 Safari 之类行为的过渡阶段?

在 iPhoneX 上,下面的代码使内容边缘到边缘也延伸到切口区域。然后,您通过使用 CSS 安全区域常量来应用边距、填充等来补偿“吃”到实际内容中的缺口:

<meta name="viewport" content="width=device-width, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
}
</style>
Run Code Online (Sandbox Code Playgroud)

在 Adroid 9 Pie 上的最新 Chrome 上,凹口旁边的“角”区域(实际切口)始终是“安全的”,并且具有浏览器 chrome 的默认背景颜色(灰白色)或您在其中定义的任何颜色该<meta name="theme-color">标签。CSS 安全区常量什么都不做,因为...没有什么可以防范的。

在此处输入图片说明

css display-cutouts

6
推荐指数
0
解决办法
2207
查看次数

使用具有非表格布局的jQuery数据表

我的应用程序要求管理员从1000多个可用名称的大型列表中创建名称的子组.我希望他们看到所有的名字,并能够通过在搜索框中输入来缩小可见项目,以便他们可以选择他们想要的东西.结果可能是逗号分隔的列表或数组.在这种情况下,Chosen/Select2行为无用.

理想的解决方案是拥有像Datatables这样的东西,你可以看到所有项目并实时缩小结果,但是,因为我只有名字,我更喜欢网格布局来最大化空间,而不是表格布局.我可以在表格上使用数据表而不是在任何其他元素上吗?

此外,虽然没有相关的数据表,你能指出我的其他解决方案来实现这种在页面上实时过滤可见元素的场景吗?

jquery datatables jquery-datatables

5
推荐指数
1
解决办法
2920
查看次数

使用:带有伪元素的LESS中的extend()

我想编写一个简单的警报组件,它具有颜色变化以及字体图标变体.图标编码为:before.我可以在vanilla CSS中写得很好,但是我想尽可能地在尽可能紧凑的情况下做它并且我坚持使用:extend()我很少使用的:(

.base-alert {
    color: red;
    ...
    &:before {
        content: 'base-icon-unicode';
        ...
    }
}
Run Code Online (Sandbox Code Playgroud)

在vanilla CSS中,变体类的代码如下:

.alert-warning {
    color: red;
}
.alert-warning:before {
    content "warning-icon-unicode";
}
Run Code Online (Sandbox Code Playgroud)

但是HTML应该是class="base-alert alert-warning".我想变化班LESS,使用代码:extend()所以在HTML我只会写class="alert-warning"或者class="alert-succes"等等.就像是:

.alert-warning {
    &:extend(.base-alert);
    color: orange;
    &:before {
       content "warning-icon-unicode";
    }
}
Run Code Online (Sandbox Code Playgroud)

但它:之前不再适用了.

css less pseudo-element

1
推荐指数
1
解决办法
787
查看次数