Form, Submit, JS

euphoric · September 10, 2010

Labrīt !

Šāda situācija :

Ir forma, textarea, submit..

Rakstot tekstu rāda : "Jums ir atlikūši 139 simboli".. utt.. + kamēr `textarea` ir tukš `submit` ir neaktīvs !

Varbūt kādam ir kāds piemērs, vai pēc kādiem atslēgas vārdiem pameklēt ?

Paldies =)

briedis · September 10, 2010

Kur problēma pāris rindiņas pašam uzkrakstīt?

Māki pievienot keyup eventu texatareai?

Māki uzrakstīt if?

Māki pogai nomainīt disabled vērtību?

euphoric · September 10, 2010

Loģiku es ļoti labi saprotu, bet JS sintakse nav mana stiprā puse, diemžēl :/

briedis · September 10, 2010

http://www.shiningstar.net/articles/articles/javascript/dynamictextareacounter.asp

Ir laiks sākt mācīties.

indoom · September 10, 2010

jautājumi par js jāliek javascript sadaļā.

Kaut kā tā uz ātro


function checktext(ta){
 var saturs = ta.value,
     garums = saturs.length,
     maxgarums = 1000;

 document.getElementById('submitpoga').disabled = garums===0;
 document.getElementById('info').innerHTML = 'Jūms īr atlīkūšī '+Math.max(0,maxgarums - garums)+' sīmbolī';
 if (garums > maxgarums) {
   ta.value = saturs.substr(0, maxgarums);
 }
}

<textarea onkeyup="checktext(this)"></textarea>
<span id="info"></span>
<input type="submit" id="submitpoga" />

Jāņem vērā, ka daudz speisi arī tiks uzskatīti, ka ir kas ierakstīts. Tam pameklē internetā javascript trim funkciju

Edited September 10, 2010 by indoom

marcis · September 10, 2010

Meklē pēc javascript pamatiem :)

Kaut kā tā (testējis neesmu):

<textarea id="myText"></textarea>
<input type="submit" value="OK" id="mySubmit" disabled="disabled" />
Vēl vari iedrukāt: <span id="left"></span> simbolus
<script type="text/javascript">
var maxLength = 140;
(function(){
	document.getElementById("left").innerHTML = maxLength.toString();
	document.getElementById("myText").onkeypress = function(e){
		var left = maxLength-e.currentTarget.value.length;
		document.getElementById("mySubmit").disabled = left < maxLength;
		if(left < 0){
			e.currentTarget.value = e.currentTarget.value.substr(0, maxLength);
			left = 0;
		}
		document.getElementById("left").innerHTML = left.toString();
	}
})();
</script>

euphoric · September 10, 2010

Paldies visiem ))

Леший · September 10, 2010

Uz ātro (handlo arī, ja poga ir piespiesta, atšķirībā no indoom varianta)

<script type="text/javascript">
var maxlength = 100;
function getlenght(elem, e){

   if (e.keyCode != 46 && e.keyCode != 8 && elem.value.length >= maxlength){
    showlength(elem);
    return false;
   }
   else {
    showlength(elem);
    return true; 
   }
}

function showlength(elem){
 if (elem.value.length >= maxlength){
  document.getElementById("test").innerHTML = "Maksimālais teksta garums!";
 }
 else {
    document.getElementById("test").innerHTML = "Palikuši "+(maxlength-elem.value.length)+" simboli.";
 }
}

</script>

<textarea onkeydown="if (!getlenght(this, event)) return false " onkeyup="showlength(this)"></textarea>
<div id="test"></div>

indoom · September 10, 2010

tas e.keyCode uz visiem browseriem nestrādās. (arī event)

Леший · September 10, 2010

Kurā tad nestrādās? IE, FF, Operā, Chrome strādā. Tu laikam jauc, dažiem browseriem atšķirās keyCode dažām pogam, bet 8(backspace) un 46(delete) visur vienādi

Edited September 10, 2010 by Леший

indoom · September 10, 2010

ok, tas keyCode lielākoties strādās. Uz keypress nebūs Mozillā, tad jāizmanto e.keyCode||e.which

Edited September 10, 2010 by indoom

codez · September 10, 2010

Es pēdējā laikā cenšos rakstīt atkārtoti izmantojamu kodu, tāpēc šeit vietā noderētu jQuery widget-a uzbūvēšana, kuru tālāk var izmantot ar vienu rindiņu, dažādās opciju kombinācijās.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script>
(function($) {
 $.widget("ui.counter", {
   options:{
     max:200,
     txt:'Palikuši %left% simboli'
   },
   _init:function(){
     var self=this;
     $(this.element).bind('keyup',function(){
       self.refresh();
     });
     self.refresh();
   },
   refresh:function(){
     var el=this.element;
     var len=el.val().length;
     var left=Math.max(0,this.options.max-len);
     if (this.options.text) {$(this.options.text).html(this.options.txt.replace('%left%',left));}
     if (this.options.button) {$(this.options.button).get(0).disabled=!len;}
   }    
 });
}(jQuery));

$(function(){
 $('#txt').counter({text:'#txt_len',button:'#btn_send'});  
 $('#txt2').counter({text:'#txt_len2',txt:'Vēl tu var ievadīt %left% simbolus'});  
 $('#txt3').counter({button:'#btn_send3'});
});
</script>
<style>

</style>
</head>
<body>
 <textarea id="txt"></textarea><br />
 <div id="txt_len"></div>
 <button id="btn_send">Send</button><br />
 <hr />
 <textarea id="txt2"></textarea><br />
 <div id="txt_len2"></div>
 <button id="btn_send2">Send</button><br />
 <hr />
 <textarea id="txt3"></textarea><br />
 <div id="txt_len3"></div>
 <button id="btn_send3">Send</button><br />
 <hr />      
</body>
</html>

Sign In

Form, Submit, JS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation