Форум АНТИЧАТ - Не большой конкурс от меня, приз

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- Болталка (https://forum.antichat.xyz/forumdisplay.php?f=46)

Не большой конкурс от меня, приз - шестизначная аська :)

Вобщем есть код:

Код:

<textarea></textarea>

<input type="text" />

Нужно написать на js как можно минимально и правильно с точки зрения программирования сценарий.

Задача сценария: выводить в текстовом поле оставшееся количество знаков, при вводе символов в текстарии. Допустим, их будет: 500. Как только, при вводе в текстарии количество больше 500 - символ просто не добавляется.

Приз - шестизначый icq uin :)

P.S. Копипаст подобных форм и последующее переделывание - не приветствуется! Спасибо!

ну для <input type="text" />
это
<input type="text" maxLength=500 />

а для еучефкуф тама юзай onkeypress или onchange или ещё чёнить чё там есть :)))

Ponchik, ну это понятно. Вот при добавлении символа или при встаке нескольких символов, счетчик должен правильно отматывать назад. И нужно сделать как можно меньше кода, но грамотно. :)

На, тырь на здоровье
https://www.orangetext.md/Default.aspx?lang=ru

PHP код:


		
			
<html>



<script>

function check_length(mForm) {

     var maxLen = 50;

     if (mForm.txArea.value.length >= maxLen) {

         mForm.txArea.value = mForm.txArea.value.substring(0, maxLen);

     } else{

         document.getElementById("mCounter").innerHTML = maxLen - mForm.txArea.value.length;

     }

}

</script>



</head>



<body>

<form name=formX method=post>

    <textarea onKeyPress=check_length(this.form);

              onKeyDown=check_length(this.form);

              name=txArea

              rows=4

              cols=30></textarea>

    <br> 

    отсталось символов <b><a id=mCounter>50</a></b>

</form>

</body>

</html>

eLWAux, спасибо, но есть ошибки. Если нажать на ентер а потом на бэкспэйс счетчик минусует всёравно :(
Ponchik, не нашел там ничего я :(

Специально для тебя выдрал из той ссылки, что давал Ponchik.

P.S. работает конечно, но код eLWAux'a красивее =)

PHP код:


		
			
<script type="text/javascript">  

function Init(){

     setInterval("CalcRest();", 250);

 }  

function  CalcRest(){

     var bmax;

     var fmax;

     var bres;

     var fres;

     var sbox;

     var sfrom;

      sbox=document.forms[0].edtMsg.value;

 

     fmax = 10;

    bmax = 137;

     bres = bmax - sbox.length;

     fres = fmax - 6; 

     if(fres<0){

       document.forms[0].edtFrom.value = sfrom.substring(0,fmax);

}

      if(bres<0){

       document.forms[0].edtMsg.value = sbox.substring(0,bmax);

       bres = 0;}

       document.forms[0].rest.value=bres;

 }

   Init();

 </script>  

<html> <form> <textarea id="edtMsg" cols="31" style="margin: 0px; width: 298px; height: 103px;" language="javascript" name="edtMsg"/></textarea> <span id="lbRest">Счетчик</span> <input align="absMiddle" name="rest" value="137" readonly="true" style="width: 25px;"/> </form> </html>

ыыыы) прикольно под видом конкурса для себя что-то делать:D
так больше народу купицо кстате гораздо)) +1 за идею

ReanimatoR, спасибо.
:) Можно конечно было просить помощи в разделе PHP, PERL, MySQL, JavaScript/Важно: [JavaScript, AJAX] Задай вопрос, получи ответ, но так на много интереснее :)
И человеку приятно будет, не просто за спасибки, которые я и так поставлю :) , а за аську шестёрочку, кстати, маска XYZa ;) Статус cl :)

m0nsieur, гавно этот скрипт! Попробуй напиши в нём несколько предложений с вертикальной табуляцией чтобы прокрутка появилась, потом потяни до самого начала и она начинает дёргаться как какое то очко =)

То есть сообщение не отредактировать потом... И такая же проблема, почему он вертикальную табуляцию считает за символ?

2 mff - я и не говорил, что это супер скрипт,а табуляцию считает наверное потому, что он предназначен для смс, где считается все.
P.S. Ты просто сказал, что не нашел там ничего, вот я и отыскал и немного отредактировал ;)

m0nsieur, ок, но не то это, можно было не отыскивать. Спасибо.

АП! Актуально!

ИМХО, самый адекватный вариант (учитывает любые символы, т.к. и перенос строки и табуляция - это символ, причем в винде перенос строки = 2 символам).

Код HTML:

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body>

<form id="frmText">

<textarea name="myText" id="myText">

</textarea>

</form>

<p>        

 Осталось символов: <span id="symLeft"></span>

</p>

<script language="JavaScript" type="text/javascript">

 var MAXLEN = 50;

 function checkLen(e) {

  var text = e.myText.value;

  var cut = false;

  var len = MAXLEN + 1;

  var mult = 1;

  while (len > MAXLEN) {

   len = text.length;

   if (len > MAXLEN) {

     text = text.substr(0, text.length - 1);

            cut = true;

   }

  }

  if (cut)

     e.myText.value = text;

  var lenLeft = MAXLEN - len;

  document.getElementById('symLeft').innerHTML = lenLeft;

  return (len < MAXLEN);

 }

 var f = document.getElementById('frmText');

 f.myText.onkeyup = function() { return checkLen(f); }

</script>

</body>

</html>

Я может что-то не так понял, но вроде ты не хочешь чтобы счетчик срабатывал на переносе строки, тогда так:

Код HTML:

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body>

<form id="frmText">

<textarea name="myText" id="myText">

</textarea>

</form>

<p>        

 Осталось символов: <span id="symLeft"></span>

</p>

<script language="JavaScript" type="text/javascript">

 var MAXLEN = 50;

 function checkLen(e) {

  var text = e.myText.value;

  var cut = false;

  var len = MAXLEN + 1;

  var mult = 1;

  if (navigator.userAgent.indexOf('Windows') != -1)

     mult = 2;

  while (len > MAXLEN) {

   len = text.length;

   var find = text.match(/\r\n|\r|\n/g);

   if (find != null)

    len -= find.length*mult;

   if (len > MAXLEN) {

     text = text.substr(0, text.length - 1);

            cut = true;

   }

  }

  if (cut)

     e.myText.value = text;

  var lenLeft = MAXLEN - len;

  document.getElementById('symLeft').innerHTML = lenLeft;

  return (len < MAXLEN);

 }

 var f = document.getElementById('frmText');

 f.myText.onkeyup = function() { return checkLen(f); }

</script>

</body>

</html>

Проверял и в винде и в линухе, тут суть в том, что он находит в тексте символы переноса строки и отнимает их от всей длины текста, либо с множителем два (если у нас винда), либо с множителем 1, если не винда.

Также можно в конце скриптовой части добавить пару строк (привязать эту функцию ко всем телодвижениям), чтобы счетчик реагировал на контекстое меню мыши типа копировать вставить вырезать и другие манипуляции:

Код HTML:

 f.myText.onchange = function () { checkLen(f); }

 f.myText.onfocus = function () { checkLen(f); }

 f.myText.onblur = function () { checkLen(f); }

 f.myText.onselect = function() { checkLen(f); }

 f.myText.onmouseout = function () { checkLen(f); }

 f.myText.onmousemove = function () { checkLen(f); }

И так, наиболее полный вариант, который не воспринимает переносы строк и реагирует на мышку выглядит примерно так:

Код HTML:

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body>

<form id="frmText">

<textarea name="myText" id="myText">

</textarea>

</form>

<p>        

 Осталось символов: <span id="symLeft"></span>

</p>

<script language="JavaScript" type="text/javascript">

 var MAXLEN = 50;

 function checkLen(e) {

  var text = e.myText.value;

  var cut = false;

  var len = MAXLEN + 1;

  var mult = 1;

  if (navigator.userAgent.indexOf('Windows') != -1)

     mult = 2;

  while (len > MAXLEN) {

   len = text.length;

   var find = text.match(/\r\n|\r|\n/g);

   if (find != null)

    len -= find.length*mult;

   if (len > MAXLEN) {

     text = text.substr(0, text.length - 1);

            cut = true;

   }

  }

  if (cut)

     e.myText.value = text;

  var lenLeft = MAXLEN - len;

  document.getElementById('symLeft').innerHTML = lenLeft;

  return (len < MAXLEN);

 }

 var f = document.getElementById('frmText');

 f.myText.onkeyup = function() { return checkLen(f); }

 f.myText.onchange = function () { checkLen(f); }

 f.myText.onfocus = function () { checkLen(f); }

 f.myText.onblur = function () { checkLen(f); }

 f.myText.onselect = function() { checkLen(f); }

 f.myText.onmouseout = function () { checkLen(f); }

 f.myText.onmousemove = function () { checkLen(f); }

</script>

</body>

</html>

Не знаю так я понял про переносы или не так) а с input type=text тебе уже подсказали, а если хочешь сделать также счетчик, то тут все также будет, только переносы строки вообще можно даже не искать. Могу и такой пример выложить.

n0reply, спасибо. Попробую завтра разобраться, что к чему :)
Godfather Bulan, спасибо! Актуально!

Всем спасибо!
Pashkela получает шестерочку 17-37-37, так как его код работает без глюков! Большое спасибо, замечательный код!!!!

http://forum.antichat.ru/showpost.php?p=1387631&postcount=2

P.S. сорр за мультипостинг...