DES/JavaScript: Unterschied zwischen den Versionen

aus GenWiki, dem genealogischen Lexikon zum Mitmachen.
< DES
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 52: Zeile 52:
</source>
</source>


== Automatische Groß- und Kleinschreibung ==
In den HTML-Code des Eingabeformulars muss das casifyName-Skript eingebunden werden:
<source lang="xml">
<script type="text/javascript" src="https://files.genealogy.net/DES/js/casifyName4.js"></script>
</source>
Jedes Feld, für das die automatische Groß- und Kleinschreibung aktiviert werden soll, bekommt die Klasse <tt>des-autocase</tt> zugewiesen, z.B.
<source lang="xml">
<input id="inputFormLastName" class="des-autocase" type="text" size="30" name="lastName"  />
</source>


[[Kategorie:DES]]
[[Kategorie:DES]]

Version vom 23. Januar 2017, 07:02 Uhr

JavaScript-Code, der nicht direkt in der DES-Webanwendung enthalten ist, wird hier verwaltet: https://gitlab.genealogy.net/project/des-javascript

Zurücksetzen des Eingabefensters

Ein großer Teil der Eingabefelder wird automatisch zurückgesetzt. Wenn man jedoch mit zusammengesetzten Eingabeelemente (s.u.) arbeitet, bleiben manche Werte erhalten. Es handelt sich bei dem Eingabefenster ja stets um ein und dasselbe div-Element. Daher gibt es einen Hook, der automatisch beim Abschicken aufgerufen wird:

function resetInputFormHook() {
  // Hier können Felder zurückgesetzt werden, z.B.
  $('#select3A').val('');
  $('#select3B').val('');
}

Sonderzeichen

Man kann im Eingabefenster leicht eine Zeile mit Sonderzeichen-Buttons erzeugen. Zunächst bindet man die JavaScript-Bibliothek ein:

 <script type="text/javascript" src="https://files.genealogy.net/DES/js/specialCharacters.js"></script>

Dann fügt man an die Stelle, an der die Sonderzeichen-Buttons erscheinen sollen, folgendes Element ein:

 <div id="specialCharacters"></div>

Schließlich fügt folgender Funktionsaufruf im JavaScript-Code des Projekts die Buttons ein:

$( document ).ready(function() {
   createSpecialCharacterList('ČŠŽčěłőřšżž', true);
});

Zusammensetzen von Werte mit Hilfe einzelner Eingabeelemente

Oben in die Eingabemaske wird folgender JavaScript-Code (in <script type="text/javascript"> eingeschlossen) eingefügt:

function combine() {
	$("#inputFormValue03").val( ($( "#select0" ).val() + " " +$( "#select1" ).val() + $("#select2").val() + $("#select3" ).val() +" "+$("#select4").val()).trim());
	$("#inputFormValue02").val($("#selectListe").val()+" "+$("#selectListeNummer").val() );
	$("#inputFormValue08").val($("#select5").val());
}

im Eingabeformular:

<input id="inputFormValue02" name="value02" type="hidden"/>
<select onchange="combine();" id="selectListe">
   <option selected="selected"></option>
   <option>A</option>
   <option>B</option>
   <option>xxx nicht in Liste xxx</option>
</select> 
<input oninput="combine();" id="selectListeNummer" size="5" type="text" />

Automatische Groß- und Kleinschreibung

In den HTML-Code des Eingabeformulars muss das casifyName-Skript eingebunden werden:

<script type="text/javascript" src="https://files.genealogy.net/DES/js/casifyName4.js"></script>

Jedes Feld, für das die automatische Groß- und Kleinschreibung aktiviert werden soll, bekommt die Klasse des-autocase zugewiesen, z.B.

 <input id="inputFormLastName" class="des-autocase" type="text" size="30" name="lastName"  />