输入内容后input控件的位置改变

最新推荐文章于 2024-08-16 11:55:27 发布
最新推荐文章于 2024-08-16 11:55:27 发布
阅读量4.2k 收藏 1
点赞数
分类专栏： 前端 文章标签： 经验 input 控件
本文为博主原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/m0_37568521/article/details/78132674
版权
在开发搜索框时遇到一个问题，输入内容后input控件的位置发生变化。通过分析发现，边框宽度和伪类设置不一致导致此现象。解决方案包括调整边框颜色或修改input控件的宽高。该问题仅在使用伪类并设置边框时出现。
摘要由CSDN通过智能技术生成
输入内容后input控件的位置改变，写了挺久的前端代码，不知道为什么之前没有遇到这个问题。既然遇到了，那么就在这里总结一下经验，遇到这个问题，是我在做一个搜索框的时候，下面是我解决的代码。
input{
    border:1px solid gray;
}
input:hover{
    border:1px solid #1E90FF;
}

代码很简单，后来我就想了一下为什么会遇到这样的情况。将input剖析了一下（后来发现还挺好玩的）
我们正常看到的边框是
<

最低0.47元/天 解锁文章
输出是最好的学习
关注
专栏目录
qt 输入组控件 Input Widgets
zhenge4636的博客
04-22 696
时间、日期、日期时间编辑框分别用于编辑时间、日期和日期时间类型的值。用户可以通过弹出的日历或时钟面板选择日期或时间。常用于选择会议时间、任务截止日期等。快捷键输入控件用于输入快捷键组合，如Ctrl+C、Shift+Tab等。编辑组合框是一个下拉列表控件，允许用户选择其中的一项，也可以输入新的选项。多行文本编辑框是一个可编辑的多行文本框，用户可以输入、修改、格式化文本内容。常用于编辑邮件、日记、代码等。行编辑框是一个单行文本框，允许用户输入和修改一行文本信息。常用于输入用户名、密码、搜索关键词等。
输入框的联动效果，当输入框内容改变时，其他跟着变化（适合于标签）
qll3609120的博客
12-25 2228
输入框联动效果，即当我改变输入框的值 相应的会有其他地方做出改变 监听事件:keyup  就像写博客添加标签一样 集体代码如下 $("#test2").keyup(function(){//输入框keyup监听事件 $("#reciver").empty();//先把级联的对象置空 var reciver = $("#tes...
input输入框向下偏移，输入中文，字符数字下移一像素问题
m0_47383870的博客
11-30 1289
输入框本身的下移问题： 如图，父级设置vertical-align为top或bottom。 解决输入汉字，字母和数字下移问题： 方法一 父级设置高度、行高以及input标签的高度设为相同的固定值。 方法二 父级不设置行高line-height，input框不设置高度height，input框通过设置line-height、padding、font-size三个属性调整自身高度
input 控制光标所在的位置
最新发布
逆风优雅的博客
08-16 348
需求：鼠标一点击input输入框 就要将焦点至于 输入框的最后面，使用户不能在内容的中间 删除或者修改。可以通过length的值 设置光标处于 input输入框所在的位置。
移动端 input在失去焦点之后，定位会错乱
qq_36183088的博客
06-21 858
面对input的位置错乱有很多的方法，这里提供一个利用js解决是方法 有很多的方法，这里提供一个利用js解决是方法 input位置错乱就是因为在输入键盘弹起来的时候，影响到了页面的定位布局，从而导致了input的位置的错乱，什么也不多说，代码最重要； $("input").blur(function () { window.scrollTo({ ...
记录我用input组件遇到的坑，input组件在输入的时候会出现上移
鹿青的博客
09-29 994
今天在做需求将几个输入框并排摆放，后来发现输入汉字的时候当前输入框会出现错位，向上移动,为了展示明显，我加了一个边框，会很明显看到中间的输入框上移。 感觉之前遇到过这个坑，很快的定位到问题原因，因为输入框的基线是以英文单词的baseline为基准，所以在输入英文的时候输入框不会上移，但是中文就会向上移动，所以只要给input增加一下样式就可以解决当前问题：vertical-align: middle; ...
input框点击后发生位移的解决办法
elsa_yxy的博客
03-14 1464
在做案例的时候，出现了如下问题：input框点击后，发生了明显的位移。 百度了一圈，没有找到答案。 后来重新看了一下自己的代码，终于找到了原因。 原来是因为 input 的高度和行高 给的不一致导致的。 input { height: 26px; font-size: 12px; line-height: 20px; padding-left: 8px; outline: none; color: #666;
微信小程序 input输入框控件详解及实例（多种示例）
08-31
- `bindinput`事件监听用户输入，当输入内容改变时触发，事件处理函数会接收到一个`Event`对象，其中`detail.value`包含了当前输入框的值。 2. **属性设置** - `type`属性用于指定输入框类型，如`text`（默认）、...
HTML5-input表单控件调用代码_html5_表单_input_代码_控件_
09-29
7. `disabled`：禁用输入控件，用户无法修改内容。 8. `autofocus`：页面加载后自动聚焦此输入框。 9. `list`：关联一个`<datalist>`元素，提供预设选项。 四、表单验证 HTML5引入了内置的表单验证机制，通过`...
日期控件(input输入框)
04-07
首先，我们需要了解HTML中的`<input>`标签，它可以用来创建各种类型的输入控件，包括日期输入。通过设置`type="date"`属性，我们可以创建一个日期选择器。例如： ```html <input type="date" id="myDate"> ``` 这...
js 动态设置input光标位置、选中
weixin_43294560的博客
11-22 2058
input节点.setSelectionRange(开始索引, 接收索引, 方向); 方向:"forward","backward"和"none" 3个可选值, 分别表示"从前往后", "从后往前"。 选中文本: .setSelectionRange(0, -1); 全选 设置光标位置: .setSelectionRange(n,n); (-1,-1) 末尾 (0,0) 开头 (n,n) 指定位置 ...
Div内垂直方向位置调整
看看我都干了些啥！
01-21 1383
Div内垂直方向位置调整     vertical-align: super;
input文本框设置字体大小后导致按钮位置偏移解决方案
zhang338448的博客
06-03 3278
今天写一个搜索框，遇到一点小问题，记录一下。 设置文本框和按钮在一行显示，两者高度一致，当设置文本框字体大小后，按钮位置发生偏移，如下图所示： 设置文本框字体大小前： 设置文本框字体大小后： 按钮位置明显向下偏移，网上查了一下，给文本框设置大小的同时，再设置垂直对齐方式为top即可，即 vertical-align: top; demo代码如下： <!DOCTYPE html> <html lang="en"> <head> <me
html输入框固定页面位置,【input输入框如何随页面缩放而缩放？ _表单元素 _布局 】 | I...
weixin_32289847的博客
06-08 992
* {margin: 0;padding: 0;}body {height: 100vh;width: 100vw;background: #eff0f4;}img {transform: scale(0.5);position: absolute;left: 1rem;margin-top: 1.1rem;}.header {background: #5fc0cd;color: white;fo...
Streamlit(九) widgets-input
heianduck的博客
01-16 2500
st.text_input / st.number_input / st.date_input / st.time_input 源码路径：${python}\Lib\site-packages\streamlit\elements\text_widgets.py(number_input.py, time_widgets.py) st.text_input st.text_input(label, value="", max_chars=None, key=None,\
streamlit之常用接口
jiangshandaiyou的博客
08-25 6408
st.header - 显示主标题 使用streamlit的header方法显示主标题。 方法原型 streamlit.header(body) 参数： body：要显示的标题文本，字符串 示例代码 >>> st.header('This is a header') st.subheader - 显示副标题 使用streamlit的subheader方法显示副标题。 方法原型 streamlit.subheader(body) 参数： body：要显示的标题文本，字符串 示例代码 &gt
JavaScript实现的键盘密码输入控件
虽然没有提供完整的代码，但从命名来看，这个函数很可能是根据前面计算的坐标来改变软键盘元素的位置。 ```javascript function evalMove() { // ... } ``` 6. **其他辅助函数**： `check` 变量可能用于控制键盘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值