Как установить положение курсора в исходное положение текстового поля?

Question

У меня есть текстовое поле внутри div. В моем случае ширина текстового поля больше ширины div. Таким образом, я использовал overflow: hidden для div (изменение пользовательского интерфейса теперь невозможно). У меня также есть кнопка «Очистить», которая очистит текстовое поле.

Теперь вопрос я облицовкой,

1. Тип длинная строка в текстовом поле.

2. Теперь нажмите кнопку очистки, чтобы очистить текст.

3. Теперь, когда вы напечатаете что-то еще, вы обнаружите, что первый символ скрыт от пользовательского интерфейса. Но позже, когда вы нажмете Home, вы сможете увидеть полный текст. В Chrome это прекрасно работает, я думаю, я нашел проблему в firefox.

Вот простой пример,

$('#but').on("click", function() { 
 
    $("#fname").val(""); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maindiv" style="width:100px; overflow: hidden;border: 2px solid black; margin:20px"> 
 
    <input type="text" id="fname" style="width: 250px;border: 5px solid red;"> 
 
</div> 
 
<input type="button" id="but" value="clear">

Есть ли способ, что я могу это исправить, пожалуйста, помогите.

Answer 1

Вы можете установить фокус после очистки поля, тогда курсор будет установлен в исходное положение.

Попробуйте это:

$('#but').on("click", function() { 
    $("#fname").val(""); 
    $("#fname").focus(); 
}); 

http://jsfiddle.net/yk48hoqm/

Answer 2

Ваш DIV имеет 150px и вход 250px, так что переполнение будет вырезана из входных данных, поэтому вы видите:

Но когда вы вводите больше символов во вход, браузер будет к нему лучше всего отобразить текст, который вы вводите, и нажимает на ввод для этого.

На ясно, делая $("#fname").val(""); нет ничего, что инструктирует браузер, чтобы изменить вход, так что браузер поддерживает интерфейс для ввода изменений.

Так перепроверять его полностью, вам нужно будет изменить вход в overflow:hidden контейнере.

Например, установить ширину входа меньше контейнера, а затем установить его обратно к исходному значению:

$('#but').on("click", function() { 
 
    $("#fname").val(""); 
 
    $("#fname").width(0); // setting the width smaller then the container 
 
    // deffer 
 
    setTimeout(function(){ 
 
    $("#fname").width(250); // setting the width to original value 
 
    }, 50); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maindiv" style="width:100px; overflow: hidden;border: 2px solid black; margin:20px"> 
 
    <input type="text" id="fname" style="width: 250px;border: 5px solid red;"> 
 
</div> 
 
<input type="button" id="but" value="clear">