✔ Chemische Formeln im input-Tag

javaDeveloper2011

javaDeveloper2011

Erfahrenes Mitglied
Hallo Leute,

ich wollte ein input type=text verwenden indem Zahlen immer sofort tiefgestellt angezeigt werden (für chemisch Formeln), wie kann ich das umsetzen?
Ich dachte schon an JavaScript, Sonderzeichen, <sup>, ect.

Hoffe auf eure Hilfe,
javaDeveloper2011
 
Wenn du schon an JavaScript dachtest, dann sollte es auch in das entsprechende Forum ;)

Es ist denke ich schwer oder nicht möglich, dass es wirklich während der Eingabe sofort tiefgestellt angezeigt wird. Zwar fallen mir da ein paar Ansätze ein, aber nichts, womit ich 100% zufrieden wäre. Deshalb hier zwei alternative Vorschläge:

1. Während dem Tippen siehst du über oder unter dem Textfeld in einem Div den gleichen Text, aber mit tiefgestellten Zahlen (praktisch eine Art live-Vorschau).
2. Oder sobald du das Textfeld verlässt (blur) wird es durch die entsprechende Vorschau ersetzt. Wenn du dann darauf klickst, bekommst du wieder das Textfeld.

Kommt also auch auf den Anwendungsfall an.
1. Eher wie hier im Forum, wenn man einen Beitrag schreibt mit Formel und man hat dann die Vorschau und kann es abschicken.
2. Eher bei in-place Bearbeitung. Man hat z.B. ein Dokument und kann an diversen Stellen einfach auf die Formeln klicken und bekommt an der Stelle ein Textfeld zum Ändern.
 
Bei WYSIWYG-Editoren geht das auch mit Javascript, von daher sollte es möglich sein. Bei denen gibt es aber auch ein Textfeld, welches von einer DIV-Box überdeckt wird.
 
Das hier ist bestimmt (noch) nicht perfekt aber zumindest mal ein Anfang:

HTML: 
<style type="text/css">
.anzeige	{ position: relative; top: 0px; left: 0px; border-style: solid; border-width: 1px; width: 200px; background-color: #FFFFFF;}
.textfeld   { position: absolute; border-style: solid; border-width: 1px; width: 200px; }
</style>

<script language="javascript" type="text/javascript">
function formel() {
text = "";
orig = document.getElementById("formel").value;

for (a = 0; a < document.getElementById("formel").value.length; a++) {
	if (isNaN(orig.substr(a, 1))) {
		text = text + orig.substr(a, 1);
	} else {
		text = text + "<sub>" + orig.substr(a, 1) + "</sub>";
	}
}

document.getElementById("formel1").innerHTML = text;
}

function anzeige() {
	document.getElementById('formel1').style.visibility = 'visible';
}
</script>

<input type="text" name="formel" id="formel" class="textfeld" value="" size="50" onkeyup="formel();" onkeypress="anzeige();" onmouseout="anzeige();"/>
<div id="formel1" class="anzeige" onmouseover="javascript: this.style.visibility = 'hidden';"></div>
 
einfach nur crack hat gesagt.:
Bei WYSIWYG-Editoren geht das auch mit Javascript, von daher sollte es möglich sein. Bei denen gibt es aber auch ein Textfeld, welches von einer DIV-Box überdeckt wird.
Zum Vergrößern anklicken....

Bei WYSIWYG Editoren braucht man überhaupt kein Textfeld.

tombe hat gesagt.:
Das hier ist bestimmt (noch) nicht perfekt aber zumindest mal ein Anfang:
Zum Vergrößern anklicken....

Die Idee es beim hovern anzuzeigen, finde ich an sich gut. Aber trotzdem bin ich irgendwie kein Fan von der Lösung (Man sieht z.b. keine Cursor und kann deshalb nicht mit der Tastatur im Text navigieren).
Aber falls der Thread-Ersteller sich dafür entscheidet, man kann dieses Schleifen Konstrukt zum ersetzen der Zahlen wesentlich schöner machen.

Javascript: 
function formel() {
	orig = document.getElementById("formel").value;
	
	document.getElementById("formel1").innerHTML = orig.replace(/([0-9]+)/g, '<sub>$1</sub>');
}
 
Hi,

erstmal Danke an alle!

@hela:
gute Idee, aber ich mach wenn möglich lieber alles selbst.

Hier jetzt noch mal, mein aktueller Stand:
HTML: 
<!doctype html>                                                                                                     
                                                                                                                    
<html>                                                                                                              
                                                                                                                    
    <head>                                                                                                          
                                                                                                                    
        <style type="text/css">                                                                                     
            #vorschau{                                                                                              
                position: relative;                                                                                 
                top: 0px;                                                                                           
                left: -1px;                                                                                         
                width: 210px;                                                                                       
                height: 33px;                                                                                       
                background-color: #FFF;                                                                             
            }                                                                                                       
            #bearbeiten{                                                                                            
                position: absolute;                                                                                 
                width: 200px;                                                                                       
            }                                                                                                       
        </style>                                                                                                    
                                                                                                                    
        <script type="text/javascript">                                                                             
            function formatieren(){                                                                                 
                document.getElementById('vorschau').innerHTML =                                                     
                document.getElementById('bearbeiten').value.replace(/([0-9]+)/g, '<sub>$1</sub>');                  
            }                                                                                                       
            function vorschau(){                                                                                    
	           document.getElementById('vorschau').style.visibility = 'visible';                                    
            }                                                                                                       
        </script>                                                                                                   
                                                                                                                    
    </head>                                                                                                         
                                                                                                                    
    <body>                                                                                                          
                                                                                                                    
        <input type="text" id="bearbeiten" onkeyup="formatieren();" onkeypress="vorschau();" onblur="vorschau()" /> 
        <div id="vorschau" onmouseover="javascript: this.style.visibility='hidden';">                               
                                                                                                                    
    </body>                                                                                                         
                                                                                                                    
</html>

So wäre es für mich schon okay, nur eigentlich sollte man auch die vorschau sehen wenn man im Textfeld war ohne was zu verändern.
Geht das?

javaDeveloper2011
 
Ich habe mal die Funktion vorschau() gelöscht und die Sichtbarkeit des DIV's auf "immer" sichtbar gestellt:
HTML: 
<!doctype html>                                                                                                     
                                                                                                                    
<html>                                                                                                              
                                                                                                                    
    <head>                                                                                                          
                                                                                                                    
        <style type="text/css">                                                                                     
            #vorschau{                                                                                              
                position: relative;                                                                                 
                top: 0px;                                                                                           
                left: -1px;                                                                                         
                width: 210px;                                                                                       
                height: 33px;                                                                                       
                background-color: #FFF;   
                border: 1px solid black;                   
            }                                                                                                       
            #bearbeiten{                                                                                            
                position: absolute;                                                                                 
                width: 200px;                   
            }                                                                                                       
        </style>                                                                                                    
                                                                                                                    
        <script type="text/javascript">                                                                             
            function formatieren(){                                                                                 
                document.getElementById('vorschau').innerHTML =                                                     
                document.getElementById('bearbeiten').value.replace(/([0-9]+)/g, '<sub>$1</sub>');                  
            }                                                                                                                                                                                               
        </script>                                                                                                   
                                                                                                                    
    </head>                                                                                                         
                                                                                                                    
    <body>                                                                                                          
                                                                                                                    
        <input type="text" id="bearbeiten" onkeyup="formatieren();" /> 
        <div id="vorschau" onclick="document.getElementById('bearbeiten').focus();"></div>                               
                                                                                                                    
    </body>                                                                                                         
                                                                                                                    
</html>
Übrigens war dein DIV in deinem Code nicht geschlossen.
Allerdings sieht man keinen Cursor....

Was ich noch bemerken wollte ist, dass wenn man z.B. einen Koeffizienten schreiben möchte, dass der dann auch tiefgestellt ist.

(Zur Erklärung: Einen Koeffizienten schreibt man nicht tiefgestellt, sondern auf gleicher Höhe, siehe z.B. auch hier Wikipedia)
 
Hi,

es soll nur die Formel jeweils einer Verbindung eingetragen werden, für Komplexe muss ich mir dann wohl noch was überlegen.
Ich hab mich jetzt eh dafür entschieden immer bearbeiten & vorschau nebeneinander zu packen, damit es etwas professioneller aussieht.

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück