Menu
I was created a div and a input field inside of the div. In input field, I set auto focus. When page load, the cursor focusing the input field. But the cursor in touch the border, so I can't clearly see the cursor. Is any way to move the cursor from left to right. I just want, the cursor should be touch the just front of the word Add a list. The clear example is inside of Stack Overflow page and the Title area. Please give your advise. Thank you.
<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>
964
To move the cursor to the beginning of an input field:Use the setSelectionRange() method to move the cursor to the beginning of the input field. Call the focus() method on the input element. The focus method will move the cursor to the beginning of the element's value.
Sometimes all you have to do to make sure the cursor is inside the text box is: click on the text box and when a menu is displayed, click on "Format text box" then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.
To set the cursor at the end of a textarea: Use the setSelectionRange() method to set the current text selection position to the end of the textarea. Call the focus() method on the textarea element. The focus method will move the cursor to the end of the element's value.
The CaretPosition interface represents the caret position, an indicator for the text insertion point. You can get a CaretPosition using the Document. caretPositionFromPoint() method.
As @Rayon said, use padding style.
.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>you can set with text-indent OR 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>In your Placeholder you have added a space, Simply remove that space, no need to add Css here.
Please try below.
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
