Toon posts:

[JS] Variabele MaxLength Textarea

Pagina: 1
Acties:

Verwijderd

Topicstarter
Okay, hier is het probleem:

ik heb een textarea, waarin een door de klant te bepale tekst kan worden ingevoerd, deze tekst mag -maximaal- 200 pixels breed zijn, en 3 regels hoog

code:
1
2
3
4
<TEXTAREA NAME='tekst' ROWS=3 
  STYLE='width: 200px; overflow: hidden; font-family: arial; font-size: 11px;' 
  MAXLENGTH=''>
</TEXTAREA>


Er wordt dus gewerkt met een lettertype waar niet alle karakters de zelfde breedte hebben, zo is een " H " vele malen breder dan een " i ".

Hie zou rekening mee gehouden moeten worden.

Ik had al het volgende bedacht,
een klein stukje Java script wat het karakters telt op het moment dat je ze invoert . . .

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script language="JavaScript">
function TrackCount(fieldObj,countFieldName,maxChars)
{
  var countField = eval("fieldObj.form."+countFieldName);
  var diff = maxChars - fieldObj.value.length;

  // Need to check & enforce limit here also in case user pastes data
  if (diff < 0)
  {
    fieldObj.value = fieldObj.value.substring(0,maxChars);
    diff = maxChars - fieldObj.value.length;
  }
  countField.value = diff;
}

function LimitText(fieldObj,maxChars)
{
  var result = true;
  if (fieldObj.value.length >= maxChars)
    result = false;
  
  if (window.event)
    window.event.returnValue = result;
  return result;
}
</script>

[...]

<TEXTAREA NAME='tekst' ROWS=3 
  STYLE='width: 200px; overflow: hidden; font-family: arial; font-size: 11px;'
  onkeyup="TrackCount(this,'textcount',82)" 
  onkeypress="LimitText(this,82)">
</TEXTAREA><br><br>
<i>Characters remaining: </i><br>
<input type="text" name="textcount" size="3" value="82"><br>


Dit lijkt me een leuke oplossing . . .
Echter: wanneer er een HOOFDletter wordt ingevuld, zou hij er 2 van de lengte af moeten knabbelen . . .

Nu is mijn vraag: hoe? :)

Ik ben slecht in Java scripting e.d. en heb de huidige code, ook vriendelijk gecopypasted van http://javascript.about.com/library/scripts/blcounttext.htm :)

[ Voor 19% gewijzigd door Verwijderd op 05-11-2003 09:35 . Reden: code mooier gemaakt ]


  • dominic
  • Registratie: Juli 2000
  • Laatst online: 19:07

dominic

will code for food

Waarom in Pixels? een andere oplossing is natuurlijk gewoon de karakters tellen en na invoer met de zoomfactor spelen om het aantal pixels passend te maken..

Download my music on SoundCloud


Verwijderd

Topicstarter
dominic schreef op 05 november 2003 @ 09:38:
Waarom in Pixels? een andere oplossing is natuurlijk gewoon de karakters tellen en na invoer met de zoomfactor spelen om het aantal pixels passend te maken..
Omdat de invoer in een blad terecht gaat komen, en dat houden we graag op 1 lettertype . . . en leesbaar voor klanten enzo :)

[ Voor 12% gewijzigd door Verwijderd op 05-11-2003 09:40 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

hier het script dat op GoT wordt gebruikt voor topicnotes:

PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function calcCharLeft_Fast(f,maxLength,s)
{

    var str = f.elements[s].value;
    var len = str.length;
    var re = /[&<>"]/g

    var c = re.exec(str);

    while (c != null)
    {

        switch(c[0])
        {

            case '&':
                len += 4;
                break;
            case '<':
                len += 3;
                break;
            case '>':
                len += 3;
                break;
            case '"':
                len += 5;
                break;

        }

        c = re.exec(str);

    }

    if (len > maxLength)
    {
        f.elements[s].value = calcCharLeft_Extended(maxLength,str);
        calcCharLeft_Fast(f,maxLength,s);
        return false;
    }

    f.elements['charsleft'].value = maxLength - len;
    return true;

}


je moet dus de regExp aanpassen zodat hij matched op hoofdletters

[ Voor 28% gewijzigd door crisp op 05-11-2003 10:00 ]

Intentionally left blank


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

ik ben lief:

PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function calcChars(s) 
{ 

  var str = s.value; 
  var len = str.length; 
  var re = /[A-Z]/g 

  var c = re.exec(str); 

  while (c != null) len++;

  alert(len);

}

Intentionally left blank