在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了，在Chrome浏览器中，当设置了line-height时，input无文字，光标高度与line-height一致；input有文字，光标高度从input顶部到文字底部。当没有设置line-height时，则是与font-size一致。

想让光标居中的解决方案是：让input的高度等于里面文字的高度，然后用padding把框撑起来，这样光标的高度和位置就固定了。

如：

input{

    height: 14px;

    padding: 4px 0px;

    font-size: 14px;

}

input输入时光标位置靠上问题解决的更多相关文章

  1. elementUi中input输入字符光标在输入一个字符后，光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

  2. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  3. 实现input输入时智能搜索

    // 智能搜索 function oSearchSuggest(searchFuc) { var input = $('#in'); var suggestWrap = $('#gov_search_ ...

  4. 解决WORD2013输入时光标老跳的问题

    Word2013有一个非常影响使用的bug.就是在编辑文档时,光标会乱跑,影响输入.微软给出了一个kb2863845 160多MB的补丁包,安装完成后就可以解决这个问题.  补丁下载链接: 链接:ht ...

  5. element ui input 输入时触发事件

    <el-form-item label="客户名" :label-width="labelWidth"> <el-input v-model= ...

  6. input输入时软键盘回车显示搜索

    很多时候我们会看到输入法里面回车是搜索等字眼,今天我们就来实现这个效果 原本的效果: <form action＝""> <input type＝"sea ...

  7. DIV可编辑后，与限制输入及光标偏移的纠葛

    前言 最近在弄个人的网站,偶然间发现DIV可以设置编辑模式,之前设计的方案在此功能上需要限制输入的长度.网上搜索了一波,综合搜索的结果,考虑使用的监听事件有:keydown .textInput .i ...

  8. JavaScript 获取输入时的光标位置及场景问题

    前言 在输入编辑的业务场景中,可能会需要在光标当前的位置或附近显示提示选项.比如社交评论中的@user功能,要确保提示的用户列表总是出现在@字符右下方,又或者是在自定义编辑器中 autocomplet ...

  9. vue中input输入第一个字符时，光标会消失，需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

随机推荐

  1. [LeetCode] Delete Node in a Linked List 删除链表的节点

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  2. [LeetCode] Insert Interval 插入区间

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  3. ElasticSearch+Kibana 索引操作( 附源码)

    一 前言 ElasticiSearch 简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elastics ...

  4. css一些进入条

    http://www.jq22.com/jquery-info5309 http://www.jq22.com/jquery-info10964 http://www.jq22.com/jquery- ...

  5. QQ传输协议分析

    2015-06-16 16:27:07 一. 实验目的: 在虚拟机下NAT模式下通过Wireshark抓包,分析QQ的传输模式.了解QQ在传输信息过程中用到的协议.分析在Nat模式下,信息传输的穿透性 ...

  6. linux 常见命令

    redhat 1.获取apt软件列表 sudo apt-cache search all 2.添加用户并创建目录 sudo useradd -m username -s /sbin/bash 3.vs ...

  7. 使用Xunit进行单元测试

    http://xunit.github.io/docs/getting-started-desktop.html 1. 新建一个类库项目 2. 通过NuGet引入xunit,Shouldly,xuni ...

  8. iOS-绘图

    0 CGContextRef context = UIGraphicsGetCurrentCont ext(); 设置上下文  1 CGContextMoveToPoint 开始画线  2 CGCon ...

  9. OS命令注入中的空格

    1.bash 空格可以替换为%20.%09(tab).%2b(+) in url.{IFS} 2.Win shell 空格可以替换为%20.%09(tab).%0b.%0c.%2b(+) in url

  10. SHELL编写NGINX自动部署脚本

    1.功能描述 1. 安装支持包,从软件源下载自定义的NGINX包,创建NGINX用户和用户组. 2. 安装并初始化NGINX配置. 3. 运行NGINX并检测运行状态. 2.实现 源码如下: #!/b ...