Avatar billede dollas Nybegynder
02. juni 2004 - 09:20 Der er 11 kommentarer

antal tegn i en input/text field

Jeg har mange gange se en tæller de tæller antal tegn i et input/text fel og sætter en stopper for indtastning hvis antallet overskrides. Nu hvor jeg selv skal bruge det, så kan jeg ikke finde en eksempel...

Nogle der vil hjælpe?
Avatar billede fennec Nybegynder
02. juni 2004 - 09:24 #1
<input type="Text" name="MyText" maxlength="10">
Avatar billede dollas Nybegynder
02. juni 2004 - 09:25 #2
Ja, det er jeg med på, men et javascript der tæller og opdaterer et besked om at der nu er f.eks 10 tegn til bage. forstår du?
Avatar billede bigo Nybegynder
02. juni 2004 - 09:29 #3
<script>
<!--
// max length of messages
MAXLENGTH = 70

function validate() {

  theForm=document.forms[0]

  // Validate length of message
  len = messageLength( theForm )
  if( len > MAXLENGTH ) {
    alert( 'Kommentaren er for lang. Den er ' + len +
          ' bogstaver lang.. Maximalt længde er ' + MAXLENGTH +
          ' bogstaver.' )
    return false
  }

// Calculate the message length
function messageLength( theForm ) {
  ml = theForm.message.value.length
  sl = theForm.sender.value.length
  if( sl > 0 ) {
    ml -= sl - sl
  }
  return ml
}
function updateCharsLeft( theForm ) {
  charsLeft = MAXLENGTH - messageLength( theForm )
  theForm.charsLeft.value = charsLeft
}

-->
</script>


kaldes f.eks. med

<form action="script.php" target="_self" method="post" onSubmit="return validate()">
Navn:<br><input type="text" name="sender"><br>
Kommentar:<br>
<textarea name="message" wrap="VIRTUAL" rows="10" cols="35" maxlength="70" onKeyUp="updateCharsLeft(this.form)"
onChange="updateCharsLeft(this.form)" onKeyPress="updateCharsLeft(this.form)"></textarea>
<br>
Du har <input type="TEXT" name="charsLeft" size="2" value="70" onFocus="blur()" maxlength="40"> bogstaver tilbage..
<input type="submit" name="sub" value="Okay"></form>
Avatar billede dollas Nybegynder
02. juni 2004 - 09:31 #4
hmmm...

Lad os sige at jeg har 3 input felter (ikke text felter.)

1 input = MAX 30
2 input = MAX 40
3 input = MAX 50

Hvordan vil du løse det?
Avatar billede dollas Nybegynder
02. juni 2004 - 09:31 #5
Og den skal iøvrigt vise antallet af indtastede menes man indtaster...
Avatar billede bigo Nybegynder
02. juni 2004 - 09:35 #6
<input type=text name="message" maxlength="30" onKeyUp="updateCharsLeft(this.form)"
onChange="updateCharsLeft(this.form)" onKeyPress="updateCharsLeft(this.form)">
Avatar billede bigo Nybegynder
02. juni 2004 - 09:35 #7
det gør den v.h.a. onKeyUp, OnChange og onKeyPress
Avatar billede dollas Nybegynder
02. juni 2004 - 09:37 #8
Er du sød at prøve at lave det fuld ud med 3 inputs for jeg kan IKKE få det til at virke...
Avatar billede ldanielsen Nybegynder
02. juni 2004 - 10:02 #9
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function checkTextLength(objField, iMaxlength, stCounter){
    if (objField.value.length > iMaxlength) objField.value = objField.value.substring(0, iMaxlength);
    if (stCounter != "") showCounter(objField, stCounter, iMaxlength);
    }
   
function showCounter(objField, strDivCounter, iMaxlength){
    document.all[strDivCounter].innerHTML = iMaxlength - objField.value.length + " tegn tilbage"
    }
   
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM id=FORM1 name=FORM1 action="" method=post>
<INPUT name=text1 onKeyUp="checkTextLength(this, 10, 'Counter1')" onChange="checkTextLength(this, 10, 'Counter1')">
<span id=Counter1></span>
<p><INPUT name=text2 onKeyUp="checkTextLength(this, 10, 'Counter2')" onChange="checkTextLength(this, 10, 'Counter2')">
<span id=Counter2></span>
<p><INPUT name=text3 onKeyUp="checkTextLength(this, 10, 'Counter3')" onChange="checkTextLength(this, 10, 'Counter3')">
<span id=Counter3></span>
</FORM>

</BODY>
</HTML>
Avatar billede bigo Nybegynder
02. juni 2004 - 10:04 #10
jeg har lavet en lille ting som kun tager højde for et enkelt textfelt.

leg lidt med det:

<html>
<head>
<script>
// max length of messages
MAXLENGTH = 70

function validate(Element) {

  var theForm=Element;

  // Validate length of message
  len = theForm.name1.value.length;
  if( len > MAXLENGTH ) {
    alert( 'Kommentaren er for lang. Den er ' + len +
          ' bogstaver lang.. Maximalt længde er ' + MAXLENGTH +
          ' bogstaver.' )
    return false
  }

  if( theForm.name1.value.length == 0 ) {
    alert( 'Der skal være en kommentar.' )
    return false
  }

  theForm.submit()
  return true
}


function validateAndSubmit() {
  doSubmit = validate()
  if( doSubmit ) {
    document.forms[0].submit()
    return true
  }
  return false
}

function updateCharsLeft( theForm ) {
  charsLeft = MAXLENGTH - theForm.name1.value.length;
  theForm.charsLeft.value = charsLeft;
}

</script>
</head>

<BODY>
Skriv et eller andet<br>
<form action="script.php" name="form1" method="post">
Navn1:<br><input type="text" name="name1" maxlength="30" onKeyUp="updateCharsLeft(this.form)" onChange="updateCharsLeft(this.form)" onKeyPress="updateCharsLeft(this.form)"> Du har <input type="TEXT" name="charsLeft" size="2" value="30" onFocus="blur()" maxlength="4"> bogstaver tilbage..
<input type="submit" name="sub" value="Okay">
</form>
</body>
</html>
Avatar billede roenving Novice
02. juni 2004 - 13:47 #11
Måske sådan så:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/505081">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">
var lens = new Array();
var orglens = new Array();
function checkLength(elm){
  spElm = document.getElementById('span'+elm.name);
  if(!orglens[elm.name]){
    orglens[elm.name] = +spElm.innerHTML;
    lens[elm.name] = +spElm.innerHTML;
  }
  l = elm.value.length;
  lens[elm.name] = l;
  spElm.innerHTML = orglens[elm.name] - l;
  if(l>orglens[elm.name]){
    alert('Du kan kun indtaste ' + orglens[elm.name] + ' karaterer i ' + elm.name);
    elm.value = elm.value.substring(0,orglens[elm.name]);
    spElm.innerHTML = 0;
    elm.focus();
    return false;
  }
}
</script>
</head>
<body>
<form id="minForm" name="minForm">
<textarea name="Tarea1" id="Tarea1" cols="40" rows="1" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea1">10</span>&nbsp;bogstaver tilbage ...
<br>

<textarea name="Tarea2" id="Tarea2" cols="40" rows="1" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea2">20</span>&nbsp;bogstaver tilbage ...
<br>

<textarea name="Tarea3" id="Tarea3" cols="40" rows="1" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea3">30</span>&nbsp;bogstaver tilbage ...
<br>

<textarea name="Tarea4" id="Tarea4" cols="40" rows="1" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea4">40</span>&nbsp;bogstaver tilbage ...
<br>

<textarea name="Tarea5" id="Tarea5" cols="40" rows="2" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea5">50</span>&nbsp;bogstaver tilbage ...
<br>

<textarea name="Tarea6" id="Tarea6" cols="40" rows="2" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea6">60</span>&nbsp;bogstaver tilbage ...
<br>

<textarea name="Tarea7" id="Tarea7" cols="40" rows="2" onkeyup="return checkLength(this);"></textarea>
Du har <span id="spanTarea7">70</span>&nbsp;bogstaver tilbage ...
<br>

</form>
</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester