更改文本字段 css 内的光标焦点位置答案

【问题标题】：Change the cursor focus position inside textfield css更改文本字段 css 内的光标焦点位置
【发布时间】：2014-04-16 19:09:12
【问题描述】：

如何更改文本字段光标的起始位置？我希望我的输入光标从我的文本字段的最开头开始。目前从中间区域开始。

这是我的文本区域的 css。

  <input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>

   #probleminput {
        position: absolute;
        display: none;
        top: 448px;
        left: 185px;
        height: 94px;
        width: 370px;
        border: 1px solid;
        outline: none;
        font-size:20px;
        font-family: Verdana;
        background:transparent;
        background-repeat: repeat;
        margin: 1px 1px 1px 5px;
        color: cyan;
    }

我可以更改上面的内容以使文本光标从头开始聚焦吗？我希望我的问题没有模棱两可。谢谢！

【问题讨论】：

是的。我将其应用于输入。我已经编辑了我的问题代码。
目前，一切正常。我可以写文本和所有内容，但它从文本区域的中间开始。我希望我的文本输入从文本区域的开头开始。
尝试使用而不是 <input> 会修复它。

标签： jquery html css

【解决方案1】：

不要设置高度，而是使用填充。

jsFiddle example

 #probleminput {
     position: absolute;
     display: none;
     top: 448px;
     left: 185px;
     width: 370px;
     border: 1px solid;
     outline: none;
     font-size:20px;
     font-family: Verdana;
     background:transparent;
     background-repeat: repeat;
     margin: 1px 1px 1px 5px;
     color: cyan;
     padding: 0 0 94px;
 }

但附带说明一下，您可能需要一个 textarea 元素。

【讨论】：

【解决方案2】：

如果您想在框中包含多行文本，请考虑改用<textarea>。输入文本字段通常用于单行，这就是它垂直居中文本的原因。

编辑：您可以保持 CSS 不变并进行以下 HTML 更改：

<textarea id="probleminput" class="form-inline" style="display: inline;"></textarea>

【讨论】：

非常感谢。但是如何摆脱右下角由三角点组成的文本区域拖动图标？我不要那个。还有一种方法可以修改滚动条，就像有一种方法可以对其进行样式化并使其看起来更漂亮，而不是普通的灰色条
要禁用调整大小，请将resize:none; 添加到您的文本区域的 CSS 中。样式化滚动条有点棘手；不同的浏览器以不同的方式显示滚动条，除了使用“伪造”它们的插件（例如perfect-scrollbar）之外，没有一种在所有浏览器中都可以使用的好方法来设置它们的样式。另一种选择是使文本区域足够大，以至于没有人需要滚动并将overflow:hidden; 添加到 CSS，如果输入的文本过多，则不会显示滚动条。