Antworten auf deine Fragen:
Neues Thema erstellen

[HTML] - Tag um Wert zu erhöhen/verkleinern

N

nullnullsix

foto.Graf

Hallo miteinander!

Ich frag das jetzt hier, weil sämtliche Suchmaschinen meine Begriffe falsch verstanden haben. Ich suche ein/das HTML-Tag, mit dem man auf der Seite einen Wert vor dem Absenden des Formulars erhöhen/verniedrigen kann. Da gibt es meine ich ein Tag, was ein Feld mit dem wert, und daneben ein Pfeil nach oben zum erhöhen, und ein Pfeil nach unten zum verringern erstellt! Wie zum Teufel heißt das? Ich finde es nirgends, und bin schon am Überlegen ob das vllt garkein HTML-Tag ist sondern individuell in JavaScript erstellt ist. Das kann aber eigetnlich garnicht sein, sowas muss es geben, ich hab das schon 1000 mal gesehen, weiß leider nur nichtmehr wo, sonst könnt ich ja in den Quelltext sehen!
Wär nett wenn mir jemand weiterhelfen kann!:)
LG
nullnullsix
 

A

AndrOve

*

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

Hallo,

meinst Du so etwas wie bei [URL="http://www.pollin.de/shop/dt/NzY5ODk0OTk-/Werkstatt/Werkzeuge/Elektrowerkzeuge/Akkuschrauber_BOSCH_PSR960.html"]Pollin[/URL] [ Beispielartikel ] ?

Ist ein Formularfeld mit bisserl Javascript im Background nehm' ich an.

Hoffe, dass Dir das helfen wird und viel Spaß beim Nachbauen ! :)
Andreas
 
randacek_pro

randacek_pro

Mod | Forum

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

Hallo,
wenn ich dich richtig verstanden habe, dann willst du ein Formularfeld, in dem zB. rechts so zwei kleine Pfeilgrafiken sind, die beim Klicken die Zahl um 1 erhöhen oder verringern?
Da HTML eine Auszeichnungssprache ist, geht das mit HTML (-Tags) selbst nicht.
Es gibt zwar ein Input-Element ("select") wo ein vordefiniertes Dropdown-Menü erscheint, aber das ist ja nicht das, was du suchst...
Ich denke, das wird meistens über zusätzliche Skripte und Funktionen realisiert... Da ich aber bei HTML5 noch nich wirklich firm bin, kann ich dir jetzt nicht sagen, ob es nicht da vielleicht einen einfacheren Weg gibt.
Jedenfalls "normal" halt mit weiteren Templates, nicht nur HTML...
LG

Edit: das was AndrOve als Beispiel verlinkt hat, funktioniert ober das JavaScript Framework jQuery mit nem speziellen Zusatzskript für diese Operation, ist ein gutes Beispiel!
 
Zuletzt bearbeitet:
N

nullnullsix

foto.Graf

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

JAAA! genau sowas mein ich! Schade, wär echt schön gewesen, wenn html das könnte! Gut ich mache mich ans Basteln! :)
dankeschön!
 
A

AndrOve

*

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

Schön, dass ich helfen konnte.

Vielleicht geht Deine Bastelei mit diesen Snippets[INDENT][URL="http://forum.de.selfhtml.org/archiv/2005/1/t98361/"]Test, ob nur Zahlen vorhanden sind per JS[/URL] und ein 
 setzen 
[/INDENT]ein wenig schneller.

Als Quick-and-Dirty Workaround würd' ich eine  nehmen mit serverseitig generierten Options. 
Geht schnell, ist watscheneinfach und funktioniert selbst bei ausgeschaltetem Javascript.

Kommt aber natürlich auf Deine Anwendung an.

Viel Spaß
Andreas

EDIT: Hab' mal gerade nachgedacht und nen altes Snippet auf meinem Rechner gefunden:
[html]<form name="form1">
<input type="text" name="zahlenfeld" value="1" maxlength="2" onKeyUp="zahl()">
...
</form>
<script language = "javascript">
function zahl() {
if (document.form1.zahlenfeld.value < "0" || "9" < document.form1.zahlenfeld.value)  {
    document.form1.zahlenfeld.value = "1";
    document.form1.zahlenfeld.focus();
    return false;
    }
}
</script>

Edit edit:
Eine elegante Universallösung
 
Zuletzt bearbeitet:
N

nullnullsix

foto.Graf

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

WOW! Das nenn ich mal eine freundliche Hilfe!!!
Vielen Dank, ich werde mich da durchwühlen und mir meine Ultimativ-lösung zusammenschustern!^^ Ich werd mein Ergebnis posten, damit auch andere die das gleiche Problem haben etwas finden!!
lg
nullnullsix
 
A

AndrOve

*

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

Der Code ist nur als Anregung gedacht, also bitte nicht Flamen, wenn Du selbst nacharbeiten mußt :)

Stammt aus meinen alten JS-Snippets.
btw, die JS-Funktion  ist eleganter.

Aber selber [URL="http://www.fingers-welt.de/gallerie/eigen/tonne/kettensaege/kettensaege.htm"]frickeln[/URL], [URL="http://www.fingers-welt.de/impress.htm"]frickeln[/URL],  und denken macht ja bekanntlich kluch...

Gruß
Andreas
 
Zuletzt bearbeitet:
N

nullnullsix

foto.Graf

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

ja, das is ja eh klar, aber der code ist mir schon eine gute hilfe ich bin in JS noch nicht sehr weit, da braucht man oft einen kleinen denkanstoß! in PHP wars bei mir genauso am Anfang!^^
Da hast du recht, nur durchs selber machen lernt man sowas, und lernt auch wie man soein Problem in Zukunft angeht!
lg
nullnullsix
 
N

nullnullsix

foto.Graf

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

SO! Ich bastelte ein wenig  unter dem didaktischen Auge von video2brain, und siehe da ich habe das was ich wollte. Ich hätte nicht gedacht, dass das so einfach ist.

Das Feld in dem die Zahl angezeigt wird, ist ein einfaches <input>-tag, das auf readonly="readonly" gesetzt wird, und eine id hat über die es, und die attribute wie value und size in den funktionen inc() und dec() angesprochen werden kann. zwei <a>-tags mit onclick="inc(id-des-zugehörigen-input-tags)" und onclick="dec(id)" sorgen für die erhöhung und erniedrigung. Das Erhöhen/Verringern selbst findet  in den funktionen inc und dec statt, und ist glaube ich auch für laien im Code gut nachvollziehbar! Als kleinen Schnickschnack habe ich noch eingebaut, dass man nicht weiter als 0 verringern kann, und, dass sich das input-feld automatisch vergrößert, wenn es in den vierstelligen bereich geht. Das aussehen habe ich über ein Stylesheet getätigt, in welchem zwei kleine Pfeilgrafiken als Hintergrund für die <a>-Tags gesetzt werden und "cursor: pointer;" gesetzt wird.
Ich hoffe das ist nachvollziehbar

[html]<html>
    <head>
        <title>Beispiel</title>    
    </head>
    <body>
    <script type="text/javascript">
    function inc(id){
        old = document.getElementById(id).value;
        neu = ++old;
        document.getElementById(id).value = "";
        document.getElementById(id).value = neu;
        var s = new String(neu);
        if(s.length >= 3){
            document.getElementById(id).size = s.length - 2;
        }
    }
    function dec(id){
        old = document.getElementById(id).value;
        if(old > 0){    
            neu = --old;
            document.getElementById(id).value = "";
            document.getElementById(id).value = neu;
            var s = new String(neu);
            if(s.length >= 3){
                document.getElementById(id).size = s.length - 2;
            }
        }
    }
    </script>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
    <form name="myForm">
        <div class="numberBox">    
            <input id="0" type="text" name="inputFeld" size="1" value="0" readonly="readonly" class="box">
                <a href="#" onclick="inc(0)" class="plus">&nbsp;</a>
                <a href="#" onclick="dec(0)" class="minus"></a>
        </div>
        <div class="numberBox">    
            <input id="1" type="text" name="inputFeld" size="1" value="0" readonly="readonly" class="box">
                <a href="#" onclick="inc(1)" class="plus">&nbsp;</a>
                <a href="#" onclick="dec(1)" class="minus"></a>
        </div>
        <div class="numberBox">    
            <input id="2" type="text" name="inputFeld" size="1" value="0" readonly="readonly" class="box">
                <a href="#" onclick="inc(2)" class="plus">&nbsp;</a>
                <a href="#" onclick="dec(2)" class="minus"></a>
        </div>

    </form>
    
    </body>
</html>
LG
nullnullsix
 
Zuletzt bearbeitet:
randacek_pro

randacek_pro

Mod | Forum

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

Dein Skript tut genau das was es soll - herzlichen Glückwunsch zur Lösung! ;)
Finde es übrigens auch sehr nobel, dass du andere, die vielleicht ein ähnliches Problem haben, an der Lösung teilhaben lässt und einen modellhaften Weg aufzeigst.
So, das wollte ich nur mal gesagt haben :)
LG
 
A

AndrOve

*

AW:
HTML: 
 - Tag um Wert zu erhöhen/verkleinern[/b]

hallo nullnullsix,

ich schließe mich [I]randacek_pro[/I] an und sage :danke: für's Posten Deiner Lösung. 

Eine Frage noch: Wieso hast Du die Pfeile nicht per <img> eingebunden sondern mittels class?
[html]<a href="#" onclick="inc(1)" class="plus">&nbsp;</a>
<a href="#" onclick="dec(1)" class="minus">&nbsp;</a>
Ich hab' zum Testen mal + und -
HTML: 
<a href="#" onclick="inc(1)" class="plus">+&nbsp;</a>
<a href="#" onclick="dec(1)" class="minus">-&nbsp;</a>
eingefügt, und Deine Lösung funktioniert tatsächlich :) :daumenhoch:

Gruß Andreas
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 46 (Mitglieder: 1, Gäste: 45)
Robots: 872

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben