CSS，input获得焦点后，父级div加边框的问题

cqwcns 发表于 2022-4-7 08:53

自己写了一个带图标的input组件，效果是这样的：

原理就是div包裹一个svg和一个input，具体代码是这样的：


         <div
         class="flex items-center w-full px-4 py-2 border rounded-md space-x-5"
         >
         <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500"
            viewBox="0 0 20 20"
            fill="currentColor"
         >
            <path
               fill-rule="evenodd"
               d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
               clip-rule="evenodd"
            />
         </svg>
         <input
            class="flex-1 text-black text-lg bg-transparent outline-none border-none"
            type="text"
         />
         </div>

有两个问题：
1、我希望再input获得焦点时，父级div的边框变成蓝色。
2、用户点击整个div时（包括点击图标），input自动获得焦点。想到的是div加一个点击事件，事件方法给input焦点，但每个input组件加一个事件，这很不科学。

所以，请教第1个问题如何实现？第2个问题更好的方法是怎样做？谢谢

renxianyang 发表于 2022-4-7 09:04

1、https://caniuse.com/?search=focus-within
2、第二个可以修改布局；图标用定位，然后pointer-events:none

zhzhch335 发表于 2022-4-7 09:19

第一个问题
获得onFocus的FocusEvent对象从e.path中寻找父元素进行样式的修改
第二个问题
给要加事件的父元素统一的class 通过class选择到所有父元素然后遍历添加事件

cqwcns 发表于 2022-4-7 11:34

用了二楼的方法，已实现。
谢谢两位朋友。

我家有条大大狗 发表于 2022-4-7 14:11

获取焦点让父div边框变色的问题，你在评论里找就是了，都差不多
点击div让input自动聚焦，这个不需要写脚本，有个简单的法子，你用label标签代替div就好

我家有条大大狗 发表于 2022-4-7 14:12

我家有条大大狗发表于 2022-4-7 14:11
获取焦点让父div边框变色的问题，你在评论里找就是了，都差不多
点击div让input自动聚焦，这个不需要写脚 ...

兼容性极佳，虽然不太符合语义化

我家有条大大狗 发表于 2022-4-7 14:18

另外，其实不是很建议你给父元素加边框，逻辑有点倒置，不太符合html的自然习惯。
你可以换个思路，将svg改为背景，input 占据整个父元素宽度，设置input的左侧内边距，为svg图标预留空间即可。
剩下的就是input聚焦时的样式变化而已

我家有条大大狗 发表于 2022-4-7 14:21

我家有条大大狗发表于 2022-4-7 14:12
兼容性极佳，虽然不太符合语义化

不过用法是符合标准的
<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

页: [1]

吾爱破解 - 52pojie.cn's Archiver

CSS，input获得焦点后，父级div加边框的问题