在上一篇文章placeholder结尾处提到, 单击搜索框搜索框会变长,然后就可以看到全部提示信息, 虽然搜索框变长且可以直接输入数据进行查询, 但是在用户输入数据前又用鼠标点击了搜索框并且刚好点击在提示信息所在的位置, 这时候我们希望是保持现状, 不要出现变化, 却恰恰事与愿违, 搜索框变回初始状态, 就好像执行了一次onBlur事件, 为什么?
原因:
确实执行了onBlur事件, 因为元素失去焦点时会触发blur事件.
position属性值是absolute的元素是脱离文档流的, 也可以认为是漂浮在输入框之上, 如果将其放置在输入框之下, 不就可以解决问题, 于是又给<span>标签添加了一个(z-index:-1), 这样到能解决以上问题同时提示信息也看不见了.
综上, 点击提示信息标签和点击空白效果一样, 那么怎么做才能阻止点击提示信息执行onBlur事件.
这里我们先整理整理需求四:
一个带有提示信息的搜索框, 提示信息可能会超出当前宽度下的搜索框(为了查看清楚提示信息内容同时也为了更清晰地看到用户输入的信息), 鼠标点击搜索框时搜索框会变长, 这时就可以看到被省略号代替了的提示信息, 用户输入数据, 提示信息消失, 用户删除输入的数据, 提示信息又出现, 点击空白处即失去焦点事件搜索框又回到初始状态.
解决:
在完成需求三的基础上(<span>添加的onClick事件去掉), 需要解决两个问题, 第一, <span>标签的width, 为了适应搜索框变大变小以及屏幕分辨率的要求,之前的宽度直接继承父元素的宽度, 父元素<div> 的width和子元素的width都不是固定大小, 如果父元素用的是百分比, 那么子元素继承的宽度是相对于父元素的百分比, 这样就可能会出现其它问题(比如,calc(~'100% - 350px'), 如果搜索框展开不是很长, 也看不全提示信息), 所以<span>标签的宽度和兄弟节点<input>保持一直是一个比较好的做法. 第二, 就是本篇文章开始提到问题, 解决的办法上面也提到了, 只不过还要做些修改: 首先, <input>设置为position布局, z-index属性值要比<span>的z-index大并且不能设置为非正数(关于这一点下边再说), 其次, 将<input>标签的背景颜色设置成透明 --- background-color: transparent; 最后再配合onBlur+onChange+onFocus事件大功告成.
