SnTT: Anzeige der noch verbleibenden Zeichen während der Eingabe

von Bernd Hort,
assono GmbH, Standort Hamburg,

Im Web ist die Anzeige der noch in ein Feld eingebbaren Zeichen ein beliebtes Hilfsmittel um dem Anwender ein unmittelbares Feedback zu geben, statt ihn anschließend mit Fehlermeldungen zu belasten.

Mit ein wenig JavaScript geht dieses auch im Lotus Notes Client.
A picture named M2

Lotus Notes unterstützt seit Version R5 JavaScript auch direkt im Client. Es gibt zwar einige Einschränkungen gegenüber den Möglichkeiten im Browser, aber für unsere Aufgabenstellung ist alles vorhanden.

Im JS Header der Maske werden die Funktion calcCharsRemain und clearCalcCharsRemain definiert.

JS Header:




var activeFunction;

function calcCharsRemain(fieldname, fieldnameDisplay, nr){
var f = document.forms[0];
var field = f.elements[fieldname];
var fieldvalue = "";
show = true;
switch(field.type){
case "text":
fieldvalue = field.value;
break
case "textarea":
fieldvalue = field.value;
break
case "select-one":
if ( field.selectedIndex != -1 ){
fieldvalue = field.options[field.selectedIndex].text;
} else {
fieldvalue = "";
show = false;
}
break
case "select-multiple":
if ( field.selectedIndex != -1 ){
fieldvalue = field.options[field.selectedIndex].text;
} else {
fieldvalue = "";
show = false;
}
break
default:
fieldvalue = "";
show = false;
break
}

if (show){
var charsRemain = nr-fieldvalue.length;
if (charsRemain>=0){
f.elements[fieldnameDisplay].value = charsRemain + " Zeichen übrig";
} else {
f.elements[fieldnameDisplay].value = "Sie haben " + (charsRemain*-1) + " Zeichen zuviel eingegeben.";
}
}
}

function clearCalcCharsRemain(fieldnameDisplay){
window.clearInterval(activeFunction);
var f = document.forms[0];
f.elements[fieldnameDisplay].value = "";
}


Des weiteren gibt es in der Maske neben dem eigentlichen Textfeld ein weiteres Feld, das zur Anzeige der Anzahl der verbleibenden Zeichen dient.
A picture named M2
Das zweite Feld muss bearbeitbar sein, damit es per JavaScript gesetzt werden kann. Damit es als solches nicht zu erkennen ist, sind Notes typischen Ecken ausgeblendet.

Im eigentlichen Textfeld wird im Event onFocus die JavaScript-Funktion
activeFunction = window.setInterval("calcCharsRemain('Textfeld', 'Textfeld_Laenge_', 20)", 300);
window.setInterval aufgerufen. window.setInterval bewirkt, dass die Funktion "calcCharsRemain" alle 300 Milisekunden aufgerufen wird. In der Funktion "calcCharsRemain" wird dann überprüft wie viele Zeichen noch eingebbar sind.

Wer sich mit JavaScript im Browser auskennt, wundert sich vielleicht, warum ich nicht das Event onKeyPress verwende, welches bei jedem Tastendruck ausgelöst wird. Leider wird dieses Event im Notes Client nicht unterstützt.

Im Event onBlur im Textfeld wird die Funktion
clearCalcCharsRemain('Textfeld_Laenge_');
aufgerufen, die das Aufrufintervall beendet.

Diese Lösung funktioniert eigentlich sehr gut. Leider gibt es eine Ausnahme. Bei Dialoglisten mit der Einstellung "Werte nicht in Liste zulassen" wird bei manueller Texteingabe leider nichts angezeigt. Das hängt damit zusammen, dass es für "Werte nicht in Liste zulassen" in HTML keine Entsprechung gibt und somit in JavaScript keine Möglichkeit existiert, auf den eingegebenen Wert zuzugreifen. Aber auch für dieses Problem gibt es eine Lösung, auf die mich Tommy Valand gebracht hat.

Die Klasse CharsRemainListener nutzt mit dem NotesTimer einen ähnlichen Ansatz. Allerdings ist die dabei kleinst mögliche Zeitspanne 1 Sekunde, was bei schnell tippenden Anwendern eventuell zu langsam ist.


'/*****************************************************************
' * Calculates the chars remaining of an input field
' *
' * UI-methods or classes are used
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Class CharsRemainListener

'/*****************************************************************
' * The Notes UI Document
' ****************************************************************/
Private uidoc As NotesUIDocument

'/*****************************************************************
' * The fieldname to monitor
' ****************************************************************/
Private fieldnameToMonitor As String

'/*****************************************************************
' * The fieldname to display the remaining chars
' ****************************************************************/
Private fieldnameToDisplay As String

'/*****************************************************************
' * The nr of chars
' ****************************************************************/
Private nrOfChars As Integer

'/*****************************************************************
' * The Notes Timer
' ****************************************************************/
Private timerListener As NotesTimer

'/*****************************************************************
' * Constructor
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Sub New (uidoc As NotesUIDocument, fieldnameToMonitor As String, fieldnameToDisplay As String, nrOfChars As Integer)
On Error Goto errorHandler

Set Me.uidoc = uidoc
Me.fieldnameToMonitor = fieldnameToMonitor
Me.fieldnameToDisplay = fieldnameToDisplay
Me.nrOfChars = nrOfChars

Set timerListener = New NotesTimer(1)
On Event Alarm From timerListener Call calcRemainChars

timerListener.Enabled = False

Exit Sub

errorHandler:
Print "Fehler-Nr.: " & Cstr(Err) & " / Zeile: " & Cstr(Erl) & " " & Error
Exit Sub
End Sub 'CharsRemainListener.New

'/*****************************************************************
' * Calculates the remaining chars
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Private Sub calcRemainChars(Source As NotesTimer)
On Error Goto errorHandler

Dim charsRemain As Integer
Dim value As Variant

value = uidoc.FieldGetText(Me.fieldnameToMonitor)
charsRemain = nrOfChars - Len(value)

If charsRemain >= 0 Then
Call uidoc.FieldSetText(fieldnameToDisplay, Cstr(charsRemain) & " Zeichen übrig")
Else
Call uidoc.FieldSetText(fieldnameToDisplay, "Sie haben " & Cstr(charsRemain*-1) & " Zeichen zuviel eingegeben.")
End If


Exit Sub

errorHandler:
Print "Fehler-Nr.: " & Cstr(Err) & " / Zeile: " & Cstr(Erl) & " " & Error
Exit Sub

End Sub 'CharsRemainListener.calcRemainChars

'/*****************************************************************
' * Enables the listener
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Public Sub Enable()
timerListener.Enabled = True
End Sub 'CharsRemainListener.Enable

'/*****************************************************************
' * Disables the listener
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Public Sub Disable()
timerListener.Enabled = False
Call uidoc.FieldSetText(fieldnameToDisplay, "")
End Sub 'CharsRemainListener.Disable

End Class 'CharsRemainListener


Weil Code immer mit einem Beispiel leichter nachzuvollziehen ist, habe ich eine entsprechende Beispiel-Datenbank zusammegestellt.
zip.gif CharsRemain.zip (108 KB)

Fachbeitrag Entwicklung

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Sie wollen eine individuelle Lösung? Kontaktieren Sie uns

Weitere interessante Artikel

Sie haben Fragen oder möchten eine Demo anfordern?

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Gerne erstellen wir eine individuelle Demo für Sie.

Wir verwenden Ihre Daten, um Sie einmalig per E-Mail zu kontaktieren. Wir geben Ihre Daten nicht an Dritte weiter. Siehe: Datenschutzhinweise
assono GmbH

Standort Kiel (Zentrale)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 407
Techn. Hotline: +49 4307 900 403
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de