Usunięcie pionowej, migającej kreski z inputa.

pytanie zadane 21 lipca 2020 w HTML i CSS przez Bakkit Dyskutant (7,600 p.)

Witam, gdy na stronie stworzymy inputa text za każdym razem po naciśnięciu na niego pojawia się migająca pionowa kreska:

Chciałem zapytać czy jest możliwość, aby ją usunąć. Pozdrawiam.

@Edit: A jeśli jest możliwość to może aby zastąpić go na inny, dowolny znak. ;)

2 odpowiedzi

odpowiedź 22 lipca 2020 przez niezalogowany
wybrane 22 lipca 2020 przez Bakkit

Najlepsza

PoC: https://codepen.io/Argeento/pen/BajMoMR
(@Comandeer, jestem ciekawy Twojego zdania)

komentarz 22 lipca 2020 przez Comandeer Guru (605,260 p.)

Nie działa, gdy się zaznaczy fragment tekstu – wówczas kursor powinien zniknąć. No i za agresywnie miga.

Da się też rozjechać faktyczną pozycję kursora z pozycją sztucznego kursora: Niezsynchronizowane pozycje kursorów na urządzeniu mobilnym Nie mam teraz normalnej klawiatury pod ręką, ale ciekawi mnie, na ile to działa dla przesuwania kursora strzałkami.

komentarz 22 lipca 2020 przez Bakkit Dyskutant (7,600 p.)

@niezalogowany, chyba jedyne możliwe rozwiązanie póki co, przerobie trochę pod siebie i będzie śmigać, dzięki wielkie ;D

komentarz 22 lipca 2020 przez VBService Ekspert (255,840 p.)

Tak działa gdy się na początku "wklepie" 4 i więcej spacji i dopiero zacznie "wprowadzać znaki"

komentarz 22 lipca 2020 przez niezalogowany

Dlatego to proof of concept - jakby nad tym posiedzieć, pewnie większość błędów dałoby się wyeliminować

Tak działa gdy się na początku "wklepie" 4 i więcej spacji i dopiero zacznie

Trzeba by spacje zamieniać na nbsp, żeby się nie łączyły

Nie działa, gdy się zaznaczy fragment tekstu – wówczas kursor powinien zniknąć.

Pewnie kwestia znalezienia odpowiednich wartości w inpucie. Na szybko znalazłem selectionEnd do określania pozycji kursora

No i za agresywnie miga.

No tutaj to już pełna dowolność. Można wstawić nawet drugiego inputa jako kursor : D

komentarz 22 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Wpisałem dokładnie "aaaaaaaaaaaaaaaaaaaaaa" (22 znaki) i dałem careta na samym końcu, oto co się dzieje:

Jeśli ktoś ma ochotę, polecam pobawić się spacjami, można zobaczyć kilka ciekawych rzeczy.

Tu wpisałem: "aaaaaaaaaaa bbbbbbbbbbbb" (12 znaków, spacja i 12 znaków)

Oto efekt z caret na końcu tekstu:

2	komentarz 22 lipca 2020 przez niezalogowany W sumie ciekawy pomysł. W wolnej chwili postaram się ogarnąć błędy i zapakować to wszystko w jakąś biblioteczkę

odpowiedź 21 lipca 2020 przez Comandeer Guru (605,260 p.)

But why?

Nie, nie ma takiej możliwości, bo jest to po prostu głupie z punktu widzenia dostępności i użyteczności. Można co najwyżej zmienić jej kolor przy pomocy caret-color. Ale to jest naprawdę bardzo kiepski pomysł.

Wspominałem już, że to zły pomysł?

komentarz 21 lipca 2020 przez Tomek Sochacki Ekspert (227,490 p.)

Zgadzam sie w 100%, wątpię by jakiś normalny UX designer chciał robić takie rzeczy...

komentarz 21 lipca 2020 przez niezalogowany

Ale już grafik... czemu nie? : D

komentarz 22 lipca 2020 przez Bakkit Dyskutant (7,600 p.)
edycja 22 lipca 2020 przez Bakkit

@Comandeer, chce stworzyć coś na styl konsoli Windowsa i pionową kreskę chce zamienić na poziomą

Oraz Panie Tomku, prosiłbym nie oceniać tego od razu w ten sposób, "Jeśli coś jest głupie, a działa, to wcale nie jest głupie" ;) Chyba w gronie programistów osoby "świeże", które patrzą na coś inaczej niż osoby, które są wyuczone pewnych schematów są również pożądane, pozdrawiam.

komentarz 22 lipca 2020 przez Comandeer Guru (605,260 p.)

Pewne rzeczy są głupie i jest to stwierdzone latami doświadczeń i badań. Jakkolwiek świeże by spojrzenie nowicjusza nie było, tak nie zmieni twardych danych.

W wątku pytasz o usunięcie kursora – i to jest głupie, po prostu. Dopiero teraz napisałeś, po co chcesz to zrobić i brzmi to już lepiej, chociaż wciąż bym nie nazwał tego przyjaznym z punktu widzenia UX (userzy są przyzwyczajeni do konkretnych rozwiązań, a terminal jest jednak dość niszowy). Niemniej w przyszłości może się pojawić możliwość zrobienia tego, co chcesz, dzięki caret-shape – https://drafts.csswg.org/css-ui-4/#caret-shape

komentarz 22 lipca 2020 przez Bakkit Dyskutant (7,600 p.)

@Edit: A jeśli jest możliwość to może aby zastąpić go na inny, dowolny znak. ;)

Dodałem to w treści pytania zanim ktokolwiek dodał odpowiedź.

Napisałem o usunięciu, aby móc zastąpić go div'em w kształcie poziomej kreski i to by właśnie symulowało usunięcie znaku. Potem pomyślałem, że może nie ma sensu kombinować i może da się od razu w css dokonać podmiany więc dodałem taki dopisek.