Skrypt w JS pokazujący ile znaków jest w polu formularza

Mam do was pytanie jak powinien wyglądać kod, który sprawdza ile znaków zostało wpisanych np. w polu <textarea>.

Jakich metod użyć do tego.

Myślałęm nad takim czymś

<script language="javascript">




  function zlicz() {
  var licznik = 0;
  for (licznik = 0;licznik < 12;licznik++) {
  var zlicz = document.getElementById("z").value;
  document.getElementById("x").value = licznik;
  }
  }

</script>






<form>


<input type=text id="z" onkeyup="zlicz()">

<input type=text id="x">
</form>

 

textarea.value.length

Masz przykładowy kod, nie używający jakichkolwiek bibliotek. Można to jako tako uprościć używając jQuery/Zepto, ale sądzę, że nie było by to wiele prostsze.

winerfresh napisał(a):

Masz przykładowy kod, nie używający jakichkolwiek bibliotek. Można to jako tako uprościć używając jQuery/Zepto, ale sądzę, że nie było by to wiele prostsze.

Mam coś takiego i nie chce działać.

 <script language="javascript">

/*
  function zmien()
    {
     var zmienna=document.getElementById("a1");
     
     var zmienna2 = document.getElementById("a2");
     zmienna.innerHTML= "<font color=red>" + zmienna2.value + "</font>";
    }
*/
var area = document.getElementById("t"),
    counter = document.getElementById("x");

area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;
};

</script>




<font id="a1">Tekst</font>

<form>
<input type=text id="a2">

<input type=button value=zmien onclick="zmien()">
<textarea id="t"></textarea>

<span id="x">0</span>

</form>

Wywołujesz całość kodu zanim powstanie drzewo DOM. Użyj document.onload lub przesuń cały kod na koniec pliku.

winerfresh napisał(a):

Wywołujesz całość kodu zanim powstanie drzewo DOM. Użyj document.onload lub przesuń cały kod na koniec pliku.

Dzięki teraz zadziałało.

Trochę ulepszyłęm swój kod dodałęm coś takiego

<font id="a1">Tekst</font>

<form>
<input type=text id="a2">

<input type=button value=zmien onclick="zmien()">
<textarea id="t"></textarea>

<span id="x" onkeyup = "a()">0</span>

</form>
<script language="javascript">

/*
  function zmien()
    {
     var zmienna=document.getElementById("a1");
     
     var zmienna2 = document.getElementById("a2");
     zmienna.innerHTML= "<font color=red>" + zmienna2.value + "</font>";
    }
*/

var area = document.getElementById("t"),
    counter = document.getElementById("x");

area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;
    if (area.value.length > 20) { //dodane
  counter.innerHTML = "<font color=red>Za dużo znaków</font>";

  } //dodane
};

</script>

I teraz jak bym miał sytuację odwrotną i miał by liczyć w dół np. jest 100 znaków i jak osiągnie wartość mniejsza od 0 nie da się wysłać formularza, a w przeciwnym razie da się wysłać.

dodanie znacznika <code class="javascript"> + usunięcie mnóstwa zbędnych pustych linii z kodu - fp

policzyć chyba umiesz, a zablokowanie wysłania formularza to zwrócenie false w onsubmit.

btw: może poczytaj jakieś materiały? to są podstawy. tymczasem przenoszę do Newbie

Javascriptu dopiero się uczę, już zawsze wiedziałem, że ten język jest nie logiczny

no bo np. taki zapis

area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;

};

Co ma na celu przecież w innych językach słowo function służy do deklaracji funckji i po tym słowie następuje nazwa funkcji, według mnie javascript jest językiem zakręconym na google nie ma żadnych kursów javascriptu po polsku, który by umiał nauczyć np. jak rozumieć taki zapis

area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;

};

Albo w jakich tagach HTML stosować poszczególne zdarzenia javascript.

usunięcie cytowania całego poprzedniego posta - fp

Można to napisać jeszcze lepiej:

var area = document.getElementById("t"),
    counter = document.getElementById("x");
 
area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;
  if (area.value.length > 20) {
    var warning = document.createElement('span'); // twórz węzły DOM w taki sposób, a nie jako tekst
    warning.setAttribute('class', 'error'); // używaj klas a nie tagu `<font>`, który jest niezalecany
    warning.innerHTML = 'Za dużo znaków';
    counter.appendChild(warning);
  }
};

A w CSSie zdefiniowany wygląd.

tomi0001 napisał(a):

no bo np. taki zapis

area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;

};

Co ma na celu przecież w innych językach słowo function służy do deklaracji funckji i po tym słowie następuje nazwa funkcji, według mnie javascript jest językiem zakręconym na google nie ma żadnych kursów javascriptu po polsku, który by umiał nauczyć np. jak rozumieć taki zapis

no to jest deklaracja funkcji
funkcję możesz definiować tak:

function nazwa() {
}

ale w javascript nie musisz wcale nadawać nazwy:

function() {
}

tylko że wtedy takiej funkcji nie wykonasz, dlatego musisz ją przypisać do czegoś:

var a = function() { }

teraz w zmiennej a masz swoją funkcję i możesz ją wywołać w każdej chwili pisząc
a()

w powyższym kodzie przypisujesz funkcję do zdarzenia onchange elementu area

area.onchange = function() { }

ale javascript jest na tyle fajny że taka konstrukcja zwraca jednocześnie nową wartość area.onchange

więc jeśli chciałbyś przypisać do innego zdarzenia to samo to nie musisz pisać w nowej linii:

area.onpaste = area.onchange;

tylko od razu możesz napisać:

area.onpaste = area.onchange = function() { }

i tym sposobem dochodzimy do konstrukcji początkowej

area.onkeyup = area.onpaste = area.onchange = function(e) {
  counter.innerHTML = area.value.length;

};

która jest w pełni logiczna

Dzięki za wytłumaczenie

Na początek słucham sobie takich kursów

to jest część 9 zacząłem od 1 części i trochę mi to dało.