CSS / jQuery / JS - ввод / вывод значения ввода текста
Просто проверьте, знает ли кто-нибудь нахальный способ анимировать выдвижение текста в поле ввода текста HTML с помощью CSS или, что более вероятно, jQuery.animate (). Поскольку они не являются их собственными элементами, я не уверен, что они доступны для манипуляций, кроме свойств стиля, доступных для родительского поля ввода? Не требовать написания кода, просто хочу либо разбить мои надежды, либо указать в конструктивном направлении!
Ответы 2
Здесь вы найдете свои ответы: CSS-анимация внутри вводимого текста?
Есть хитрое решение для анимации текста, например, с текстовым отступом, но текст будет анимирован только внутри ввода текста от одного края до другого. Чтобы иметь анимацию с левой / правой стороны экрана, вам нужно будет добавить настраиваемую разметку, чтобы анимировать элемент DOM с текстом внутри.
На мой взгляд, вам следует использовать дополнительный <span> с текстом, который вы хотите анимировать, и анимировать его от края экрана до элемента ввода. По завершении вы можете показать вводимый текст, и вы получите эффект перемещения текста от края экрана к полю ввода.
Немного странно, но уверен? Вы можете анимировать отступ текста, чтобы получился «слайд».
#slideText {
transition: text-indent 1s;
text-indent: -100px;
}
#slideText:focus {
text-indent: 0;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" value = "This is a test" id = "slideText">
Большое спасибо!! :)