svelte - 在 Svelte 组件中单击焦点切换
问题描述
我制作了一个用于输入财务数字的组件,用于我的输入表单。它现在真的很好用,除了一个奇怪的行为:当我点击输入字段时,它会按预期获得焦点,但是当它已经有焦点时点击它会带走焦点。
组件中只有一个 on:click 处理程序,当我删除它时,行为没有改变。所以,我不知道是什么导致了这种奇怪。
<p>Input with precision=2 <Money id=first bind:value=a precision=2/>
<br/>Value={a}</p>
<hr/>
<p>Input with no precision specified <Money ref:m2 bind:value=b/><br/>
Value={b}</p>
<script>
export default {
data(){return {
a:1234.34,
b:3.14159265
}},
components: {
Money : "./Money.html"
}
}
</script>
<style>
/* How to sytle the component*/
:global(#first) {
font-family:serif;
lobal(#first) {
font-family:serif;
background:#ff9;
}
</style>
这是显示问题的 REPL。
https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e
解决方案
发生这种情况是因为div.focused:before {...}
CSS 在输入前面创建了一个伪元素。您可以添加pointer-events: none
以防止这种情况发生 -示例在这里。
(感谢我们Discord 聊天室中的 njb 解决了这个问题 - 我们有一个支持频道,也非常欢迎您提出这些问题!)
推荐阅读
- python - 如何在python中使用shell命令将pdf转换为jpg?
- c# - 使用 Google Drive API 在 Google Doc 上获取评论:评论所有者的 EmalAddress 返回 null
- r - 循环遍历数据框以生成新列
- c++ - *++*++ppp,*++pp[1],*++(*(1+ppp)有什么具体区别吗?(C/C++指针问题)
- python - 我如何通过我的 Python 脚本为开发人员发送 whatsapp 消息
- amazon-web-services - 如何向 AWS S3 存储桶添加重定向规则?
- javascript - 当 useCallback 缺少依赖时 React useState 和 useCallback hook 如何工作
- sql-server - 由于 Excel 文件导入,其他用户无法登录
- javascript - 在 Firestore 中添加新文档时出现问题
- go - 在 go 中动态调用模型