在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. Vue.js的入门

    介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...

  2. common-pool2 学习：thrift连接池的另一种实现

    对象池是一种很实用的技术,经典的例子就是数据库连接池.去年曾经从零开始写过一个thrift客户端连接池.如果不想重造轮子,可以直接在apache开源项目commons-pool的基础上开发. 步骤: ...

  3. docker学习(7) docker-compose使用示例

    上一回学习了如何利用docker搭建一个mysql + java service + nginx,总共4个docker容器,如果采用docker run的方式一个一个容器去创建十分麻烦.为了能更高效的 ...

  4. 谈一下如何设计Oracle 分区表

    在谈设计Oracle分区表之间先区分一下分区表和表空间的个概念: 表空间:表空间是一个或多个数据文件的集合,所有数据对象都存放在指定的表空间中,但主要存放表,故称表空间. 分区表:分区致力于解决支持极 ...

  5. 创业日志N，一听到别人说创业我就怕

    最近总有些朋友想创业,咨询我的意见. 一般是在公司干腻了,有个想法,想出来试试水.还有是觉得自己的idea太棒了,想试试. 相同的是两者都有点怕.听说最近创业环境不好,没有投资!有个朋友推荐的创业者, ...

  6. [板子]倍增LCA

    倍增LCA板子,没有压行,可读性应该还可以.转载请随意. #include <cstdio> #include <cstring> #include <algorithm ...

  7. 1226关于count(*)不走主键索引反而走二级索引

    转自 http://www.2cto.com/database/201508/433975.html mysqlcount(*)会选哪个索引? 2015-08-19      0个评论    来源:D ...

  8. oracle db link的查看创建与删除

    1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...

  9. vs中使用beyondcompare比较

    开启 Visual Studio  的 [工具] /[选项] / [源代码管理] /[Visual Studio Team Foundation],并开启「配置用户工具」 如下图单击「添加」按钮 接着 ...

  10. Frameset框架

    总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: <frameset rows="> <frame src="to ...