Strona imitująca czat

Question

Witam serdecznie,

Przychodzę z prośbą o radę i chęcią nauki. Pomagam znajomym oczywiści pro bono w stworzeniu strony a temat wygląda tak:

-Chcemy by strona rejestracji wyglądała jak czat ;) mianowicie pytanie - odpowiedź (-jak masz na imię? - bla bla itp.) i tutaj moje pytanie czy da się to ogarnąć w html+css ew. js (chciałbym żeby to wyglądało jak na tej stronie

- doszedłem do miejsca w którym strona zadaje pytanie ale nie wiem jak zatrzymać dalsze wykonywanie w oczekiwaniu na odpowiedź.

	</style>
<section class="chat">
   
   <div class="chat_message_A" style="--delay: 16s;">
      <div class="chat__content">
         <p>tekst2</p>   
      </div>
   </div>

   <div class="chat_message chat_A" style="--delay: 13s;">
      <div class="chat__content">
         <p>tekst1</p>   
      </div>
   </div>
   
   <div class="chat_message_A" style="--delay: 10s;">
      <div class="chat">
         <p>tekst1</p>   
      </div>
   </div>   

   <div class="chat_message_B" style="--delay: 7s;">
      <div class="chat">
         <p>
		<button onclick="setTimeout(example)">odpowiedz</button>
			 <br /></p>   
      </div>
   </div>
	
	<div class="chat_message_A" style="--delay: 6s;">
      <div class="chat">
         <p>pytanie?</p>   
      </div>
   </div>   

   <div class="chat_message_A" style="--delay: 2s;">
      <div class="chat">
         <p>tekst1.<br />
            tekst2</p>   
      </div>
   </div>


</section>

Bardzo proszę Was o jakieś sugestie i pomoc.

Answer 1

Można coś takiego zrobić w CSS, JS

Ja bym zrobił tak, że inputy są ``` display: none; ```

i gdy ktoś skończy pisać i będzie np. 5 znaków, to wtedy pojawia się kolejny input

coś w stylu

```

function input1(){

var name =  $('#name');

if( name.length > 5) {$('#number').show(); }

else { {$('#number').val("").hide(); }

}

```

z założeniem, ze jak usunie znaki, to wszystko tez zostanie usunięte.

i wiadomo, trzeba  określić kiedy byłby nasłuch tej funckji ale chyba wystarczy przy zmianie inputa więc

```
 

$("input").change(function(){
input1();

});

```

Comments

Dziękuję za poradę,

Jest jednak pewne ale ponieważ to pole odpowiedzialne było by za przechwytywanie info na potrzeby rejestracji musiała by się dalszą część "czatu" pojawiać dopiero po kliknięciu submita

---

to dajesz na słuch na button

```
 

$("button").submit(function(){

input1()

});

```

i wtedy dopiero będzie skrypt wykonywał obliczenia. wartości w zmiennych będą trzymane dopóki klient jest na stronie, więc może nacisnąć kilka sumbmitow i na koniec ten najważniejszy "rejestruj".

Z ta logika mozesz zrobić co chcesz, bo może tez być tak ze są jakieś niewidoczne <p id="zzz"></p>  i one będą zadawać pytanie w oknie czatu w stylu

 

```

if( name.length > 5) {

$('#number').show();

/pokazujemy nowy input

$('#text").hide();

/chowamy obecny

$('#demotext).html("podaj teraz swoje imię");

}

```

 

i tak dalej i tak dalej.. możesz