Niedawno trafiłem na artykuł dotyczący dynamicznego wydłużania podkreślenia wpisywanego tekstu. Rozwiązanie opisywane w artykule jest zastosowane w wyszukiwarce serwisu TripAdvisor. Opiera się o bibliotekę React, a elementem podkreślenia "śledzącym" długość tekstu jest element SPAN.
My dziś podejmiemy wyzwanie i zrobimy to inaczej. Bez użycia JavaScript.
Jeśli danych z edytowanego pola nie będziesz przesyłał formularzem lub ewentualnie będziesz to robił, ale z pomocą Ajaxa, to będziesz o jeden element zaoszczędzony do przodu. Być może zapomniałeś, ale oprócz standardowych pól formularza, które umożliwiają edycję, istnieje atrybut contenteditable dla standardowych elementów, który ustawiony na true umożliwia ich edycję. Dzięki zastosowaniu wyświetlania inline dla edytowanego elementu o jego szerokości decyduje długość wpisanego tekstu, a skoro element ma dodaną dolną ramkę, to ta siłą rzeczy będzie się wydłużać wraz z długością elementu (tekstu).
<div class="outer">
<div contenteditable="true" role="textbox">
Lorem Ipsum jest tekstem stosowanym
</div>
</div>
+
div.outer {
border-bottom: 1px solid #ccc;
}
div[contenteditable] {
display: inline;
border-bottom: 2px solid #f00;
outline: none;
margin-bottom: -1px;
}
Jeśli nie chce Ci się wpisywać podanego kodu, to proszę bardzo:
Proste? Proste. Jak kreska.
Przydatne linki:
Wspomniany artykuł
Atrybut contenteditable