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 Tipp 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? Wir sind für Sie da.

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