Question

我在div中创建了一个div和一个输入字段。在输入字段中，我设置了自动对焦。当页面加载时，光标聚焦输入字段。但光标触摸边框，所以我无法清楚地看到光标。有没有办法将光标从左向右移动。我只想要，光标应该触及单词添加列表的正面。清晰的示例位于 Stack Overflow 页面和标题区域内。请给出你的建议。谢谢。

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 2

您可以使用文字缩进或填充

进行设置

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>

Answer 3

在你的占位符中你添加了一个空格，只需删除该空格，不需要在这里添加Css。

请在下面试试。

＆＃13;

<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>

＆＃13;

Answer 4

在CSS中使用#SAVE_LIST{ padding-left:10px; }为了给它一个填充，而不是光标从你定义的距离自动设置。

$(document).ready(function(){
  $('#id_event_type').on('change', function() {
    toRet = $('#id_event_type option:selected').val(); //getting val() here of selected option
    alert(toRet);//no neet to get .val() here

   });
});

如何在输入字段

4 个答案: