如何在输入字段中从左到右移动光标小位答案

【问题标题】：How to move cursor small bit from left to right in a Input field如何在输入字段中从左到右移动光标小位
【发布时间】：2017-08-04 14:45:47
【问题描述】：

我在 div 中创建了一个 div 和一个输入字段。在输入字段中，我设置了自动对焦。页面加载时，光标聚焦输入字段。但是光标在触摸边框，所以我看不清光标。是否可以将光标从左向右移动。我只是想要，光标应该触摸添加列表这个词的前面。明显的例子在 Stack Overflow 页面和 Title 区域内。请给出你的建议。谢谢。

<div  
    style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; " >
    <input class = "list-name-field" id = "SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder = "  Add a List...">
</div>

【问题讨论】：

padding 或 text-indent

标签： html css

【解决方案1】：

正如@Rayon 所说，使用padding 风格。

.list-name-field {
  padding: 0 10px;
}

<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px;">
  <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0;" type="text" name="" placeholder="Add a List...">
</div>

【讨论】：

【解决方案2】：

您可以使用 text-indent 或 padding

进行设置

input[type=text]{
  text-indent:15px;
}   

/*OR*/

input[type=text]{
  padding:0px 15px;
}

<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; ">

    <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder="  Add a List...">
</div>

【讨论】：

【解决方案3】：

在您的占位符中添加了一个空格，只需删除该空格，无需在此处添加 Css。

请在下面尝试。

<div  style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; " >
							
							<input class = "list-name-field" id = "SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder = "Add a List...">
							</div>

【讨论】：

上面的代码没有什么不同。它和我的一样。请检查。
请查看placeholder = "Add a List..."部分。
但是，我需要，占位符单词和光标应该从边界移动一点。现在它触及边界。看看吧。

【解决方案4】：

在 CSS 中使用 Padding-left 以便为其左侧填充，而不是光标将自动设置为您定义的距离。

#SAVE_LIST{
   padding-left:10px;
}

【讨论】：