在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. java工具类

    1.HttpUtilsHttp网络工具类,主要包括httpGet.httpPost以及http参数相关方法,以httpGet为例:static HttpResponse httpGet(HttpReq ...

  2. [LeetCode] Validate IP Address 验证IP地址

    In this problem, your job to write a function to check whether a input string is a valid IPv4 addres ...

  3. [LeetCode] Path Sum III 二叉树的路径和之三

    You are given a binary tree in which each node contains an integer value. Find the number of paths t ...

  4. [LeetCode] Ugly Number 丑陋数

    Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...

  5. [LeetCode] Transpose File 转置文件

    Given a text file file.txt, transpose its content. You may assume that each row has the same number ...

  6. [LeetCode] Integer to Roman 整数转化成罗马数字

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...

  7. phpmyadmin not found

    在 ubuntu 14.04 中使用: > sudo apt-get install phpmyadmin 安装好 phpmyadmin 之后,打开 http://localhost/phpmy ...

  8. 【C#】类单例 可以解决全局变量的问题

    单件模式(Singleton):保证一个类仅有一个实例,并提供一个访问它的全局访问点. 知道 详解

  9. 关于EventSource的精华

    他是keep-alive的连接,服务端持续向这个请求的Reponse发送数据,以"data: "+您的消息+"\n\n"的格式发送,浏览器端会收到您发送的消息. ...

  10. 线程join理解

    1.python默认参数创建线程后,不管主线程是否执行完毕,都会等待子线程执行完毕才一起退出,有无join结果一样 2.如果创建线程,并且设置了daemon为true,即thread.setDaemo ...