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

Discussion in 'Болталка' started by mff, 12 Jul 2009.

  1. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    Вобщем есть код:
    Code:
    <textarea></textarea>
<input type="text" />
    Нужно написать на js как можно минимально и правильно с точки зрения программирования сценарий.

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

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

    P.S. Копипаст подобных форм и последующее переделывание - не приветствуется! Спасибо!
     
    #1 mff, 12 Jul 2009
  2. Ponchik

    Ponchik Хлебо-булочное изделие

    Joined:
    30 Aug 2005
    Messages:
    687
    Likes Received:
    807
    Reputations:
    311
    ну для <input type="text" />
    это
    <input type="text" maxLength=500 />

    а для еучефкуф тама юзай onkeypress или onchange или ещё чёнить чё там есть :)))
     
    #2 Ponchik, 12 Jul 2009
  3. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    Ponchik, ну это понятно. Вот при добавлении символа или при встаке нескольких символов, счетчик должен правильно отматывать назад. И нужно сделать как можно меньше кода, но грамотно. :)
     
    #3 mff, 12 Jul 2009
  4. Ponchik

    Ponchik Хлебо-булочное изделие

    Joined:
    30 Aug 2005
    Messages:
    687
    Likes Received:
    807
    Reputations:
    311
    На, тырь на здоровье
    https://www.orangetext.md/Default.aspx?lang=ru
     
    #4 Ponchik, 12 Jul 2009
  5. eLWAux

    eLWAux Elder - Старейшина

    Joined:
    15 Jun 2008
    Messages:
    860
    Likes Received:
    616
    Reputations:
    211
    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>
     
    #5 eLWAux, 12 Jul 2009
  6. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    eLWAux, спасибо, но есть ошибки. Если нажать на ентер а потом на бэкспэйс счетчик минусует всёравно :(
    Ponchik, не нашел там ничего я :(
     
    #6 mff, 12 Jul 2009
  7. m0nsieur

    m0nsieur Elder - Старейшина

    Joined:
    8 Apr 2008
    Messages:
    223
    Likes Received:
    69
    Reputations:
    10
    Специально для тебя выдрал из той ссылки, что давал 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>
     
    #7 m0nsieur, 12 Jul 2009
    Last edited: 12 Jul 2009
  8. ReanimatoR

    ReanimatoR Elder - Старейшина

    Joined:
    27 Aug 2006
    Messages:
    115
    Likes Received:
    118
    Reputations:
    34
    ыыыы) прикольно под видом конкурса для себя что-то делать:D
    так больше народу купицо кстате гораздо)) +1 за идею
     
    #8 ReanimatoR, 12 Jul 2009
  9. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    ReanimatoR, спасибо.
    :) Можно конечно было просить помощи в разделе PHP, PERL, MySQL, JavaScript/Важно: [JavaScript, AJAX] Задай вопрос, получи ответ, но так на много интереснее :)
    И человеку приятно будет, не просто за спасибки, которые я и так поставлю :) , а за аську шестёрочку, кстати, маска XYZa ;) Статус cl :)
     
    #9 mff, 12 Jul 2009
  10. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    m0nsieur, гавно этот скрипт! Попробуй напиши в нём несколько предложений с вертикальной табуляцией чтобы прокрутка появилась, потом потяни до самого начала и она начинает дёргаться как какое то очко =)

    То есть сообщение не отредактировать потом... И такая же проблема, почему он вертикальную табуляцию считает за символ?
     
    #10 mff, 12 Jul 2009
  11. m0nsieur

    m0nsieur Elder - Старейшина

    Joined:
    8 Apr 2008
    Messages:
    223
    Likes Received:
    69
    Reputations:
    10
    2 mff - я и не говорил, что это супер скрипт,а табуляцию считает наверное потому, что он предназначен для смс, где считается все.
    P.S. Ты просто сказал, что не нашел там ничего, вот я и отыскал и немного отредактировал ;)
     
    #11 m0nsieur, 12 Jul 2009
  12. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    m0nsieur, ок, но не то это, можно было не отыскивать. Спасибо.
     
    #12 mff, 12 Jul 2009
  13. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    АП! Актуально!
     
    #13 mff, 13 Jul 2009
  14. n0reply

    n0reply New Member

    Joined:
    31 Mar 2009
    Messages:
    14
    Likes Received:
    1
    Reputations:
    0
    ИМХО, самый адекватный вариант (учитывает любые символы, т.к. и перенос строки и табуляция - это символ, причем в винде перенос строки = 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 тебе уже подсказали, а если хочешь сделать также счетчик, то тут все также будет, только переносы строки вообще можно даже не искать. Могу и такой пример выложить.
     
    #14 n0reply, 14 Jul 2009
  15. Godfather Bulan

    Godfather Bulan Elder - Старейшина

    Joined:
    18 Mar 2008
    Messages:
    172
    Likes Received:
    443
    Reputations:
    25
    актуально?
     
    #15 Godfather Bulan, 15 Jul 2009
  16. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    n0reply, спасибо. Попробую завтра разобраться, что к чему :)
    Godfather Bulan, спасибо! Актуально!
     
    #16 mff, 19 Jul 2009
  17. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    Всем спасибо!
    Pashkela получает шестерочку 17-37-37, так как его код работает без глюков! Большое спасибо, замечательный код!!!!

    /showpost.php?p=1387631&postcount=2

    P.S. сорр за мультипостинг...
     
    #17 mff, 29 Jul 2009
(You must log in or sign up to post here.)