Ergebnis 1 bis 12 von 12
  1. #1
    B1fr0st ist offline Grünschnabel
    registriert
    01-06-2011
    Beiträge
    5

    Question CSS: form input:first-letter{}

    Hi Leute!!

    Wie die Topic schon vermuten lässt, möchte ich das offiziel für den Text in einem html form input (noch?) nicht vorhandene CSS Pseudoelement :first-letter nachbauen.

    Anders gesagt, möchte ich dem ersten Buchstaben in einem html Eingabefeld eine andere Farbe geben, hab aber keinen Plan, wie ich das anstellen soll.

    Dass dies mit reinem CSS nicht zu erreichen ist, steht hier:
    http://www.htmlforums.com/css/t-chan...er-126522.html

    Selbst kann ich zwar kein Javascript, aber Programmieren an sich schon.

    Könnt ihr mir weiterhelfen?? Das ist doch mit Javascript bestimmt zu lösen??
    Nach möglichkeit sollte eure Lösung nicht auf Bilddateien zugreifen.

    Vielen Dank im Vorraus

    B1fr0st

  2. #2
    kicia ist offline Routinier
    registriert
    05-02-2008
    Beiträge
    434

    AW: CSS: form input:first-letter{}

    Ich gehe davon aus, daß das nicht geht.
    Der Angezeigte Inhalt ist ja das Attribut des INPUT Tags. Da kann man ja auch kein SPAN einfügen oder so, auch nicht mit Javascript.

    Ob man das mit Javascript lösen kann und wenn ja wie, hängt davon ab, wie die Seite genau funktionieren soll. Kann u.U. sehr großer Aufwand sein.
    Gruß, kicia

  3. #3
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: CSS: form input:first-letter{}

    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  4. #4
    B1fr0st ist offline Grünschnabel
    registriert
    01-06-2011
    Beiträge
    5

    Arigatou

    Hi kicia, hi Arcsinh!!

    Danke für eure schnellen Antworten!!


    @kicia:

    Das Wort 'unmöglich' gibt es für mich nicht!! Mit einem ordentlichen "WORK AROUND" ist alles möglich!!


    @Arcsinh:

    Echt nett von dir, dass du mir schnell eine Lösung gebastelt hast!!
    Dein Ansatz ist zwar ein wenig verbugt, hat aber (glaube ich) potential!!
    Es ist jedoch zu berücksichtigen (hab ich vergessen zu erwähnen), dass das input Feld ein Suchfeld ist in einem Wordpress Theme. Deshalb bin ich mir nicht sicher, ob ich die beiden Strings hinterher wieder zusammensetzen kann bevor Wordpress sucht.
    Ich hab heute mit js angefangen und werde mich mal hinsetzen und deinen Code noch tunen.
    Es würde mich sehr freuen, wenn du (als JS-Experte) mich da ein wenig unterstützen würdest.


    Mein Ansatz beruht darauf, dass ich ein <span> mit position:absolute und z-index: 314 über das input Feld leg, da die Formattierung einstell und über js Events den Inhalt manipuliere.
    Geändert von B1fr0st (01-06-2011 um 23:29 Uhr)

  5. #5
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Arigatou

    Zitat Zitat von B1fr0st Beitrag anzeigen
    Das Wort 'unmöglich' gibt es für mich nicht!!
    Du bist ja ein ganz Toller. Trotzdem brauchst Du andere?

  6. #6
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: CSS: form input:first-letter{}

    Naja, wie gesagt: die Idee war nicht ernst gemeint, aber wenn du trotzdem auf JS setzt, kannst du ein input-Feld gleich ganz simulieren... wovon ich aber abraten würde.
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  7. #7
    B1fr0st ist offline Grünschnabel
    registriert
    01-06-2011
    Beiträge
    5

    AW: CSS: form input:first-letter{}

    Ich bin schon wieder einen Schritt weiter!
    Für die perfekte Lösung müsste ich nur einen WYSIWYG Editor im Nanoformat bauen, der automatisch den ersten Buchstaben anders formattiert. Hab mir sowas mal angeschaut:

    http://www.devguru.com/features/tuto...g/wysiwyg2.asp

    Scheint garnicht so schwer zu sein. Aber ich versteh nicht, wieso das Beispiel da nicht im Firefox funktioniert??

    Kennt da wer von euch noch ein paar Anleitungen??
    Bleibt nur die Frage, wie ich das Als Formular bastel und nicht als Iframe??

  8. #8
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: CSS: form input:first-letter{}

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
        <title>Eingabefeld</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <style type="text/css">
            #input_text {
                width: 300px; height: 20px;
                padding: 4px;
                border: 1px solid #000;
            }
            #input_text:first-letter {
                color: #f00;
            }
        </style>
    </head>
    
    <body>
        <div id="input_text" contentEditable="true" designMode="on"></div>
    </body>
    </html>
    Aus irgendeinem Grund ist es in den Webkit-Browsern nicht möglich.
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  9. #9
    B1fr0st ist offline Grünschnabel
    registriert
    01-06-2011
    Beiträge
    5

    AW: CSS: form input:first-letter{}

    Coole Lösung, danke dafür!!
    So ganz ist es aber auch noch nicht ausgereift.

    Könnte man diesen iframe hier so aufpeppen, dass er das macht, was ich will??

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title> Using execCommand to bold text </title>
        <script language="JavaScript">
    
          function Init ( ) {
            iView.document.designMode = 'On';
          }
    
          function boldIt ( ) {
            iView.document.execCommand('foreColor', false, '#0099FF');
          }
    
        </script>
      </head>
      <body onLoad="Init()">
        <iframe id="iView" style="width: 200px; height:70px"></iframe>
        <br /><br />
        <input type="button" onClick="boldIt()" value="Toggle Bold">
      </body>
    </html>
    Die finale Lösung sollte wirklich maximal Browserübergreifend sein.
    Ich nehme gerne weitere Vorschläge entgegen!!

  10. #10
    B1fr0st ist offline Grünschnabel
    registriert
    01-06-2011
    Beiträge
    5

    AW: CSS: form input:first-letter{}

    Hi Leute!!

    Ich stehe jetzt kurz vor der Lösung des Problems!!
    Dazu habe ich mir den Midas Editor von Mozilla angeschaut und alles für die Lösung meines Problems unwichtige entfernt.
    Sieht momentan so aus:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Mozilla Rich Text Editing Demo</title>
        <script type="text/javascript">
    
        function colorize ( ) {
          document.getElementById("edit").contentWindow.document.execCommand('forecolor', false, '#00FF00');
        }
    
        function Start ( ) {
          document.getElementById('edit').contentWindow.document.designMode = "on";
    
          //  add event listeners
          if (document.addEventListener) {
            document.getElementById("edit").contentWindow.document.addEventListener("keypress", colorize, true);
          } else if (document.attachEvent) {
            document.getElementById("edit").contentWindow.document.attachEvent("keypress", colorize, true);
          }
        }
    
        </script>
      </head>
      <body onload="Start()">
    
        <iframe id="edit" height="200px" width="100%"></iframe>
    
        <form>
          <input type="hidden" />
          <input type="submit" />
        </form>
    
      </body>
    </html>
    Da ist nicht mehr viel übrig geblieben. Kann mir einer von euch noch schnell die Funktion colorize() so erweitern, dass sie nur den ersten Buchstaben einfärbt?? Ich wäre euch sehr dankbar. Copy + Paste sollte auch funktionieren bitte.

    Danach muss das ganze Teil nur noch beim Tastendruck auf ENTER in ein input Feld mit dem Typ hidden geschrieben werden. Auch dabei wäre ich für Hilfe sehr dankbar.

  11. #11
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: CSS: form input:first-letter{}

    Zitat Zitat von B1fr0st Beitrag anzeigen
    Kann mir einer von euch noch schnell die Funktion colorize() so erweitern, dass sie nur den ersten Buchstaben einfärbt?? Ich wäre euch sehr dankbar. Copy + Paste sollte auch funktionieren bitte.

    Danach muss das ganze Teil nur noch beim Tastendruck auf ENTER in ein input Feld mit dem Typ hidden geschrieben werden. Auch dabei wäre ich für Hilfe sehr dankbar.
    Einmal Pizza Salami Funghi zum Mitnehmen bitte.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: CSS: form input:first-letter{}

    Ich hätt' gerne einmal Tonno...

Ähnliche Themen

  1. input form value +7 tagen
    Von taxishop im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 04-11-2010, 08:33
  2. Form nächstes input-Feld
    Von meistermo im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 19-07-2009, 16:34
  3. input als single u. serie in doc.form.elements
    Von inco im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 27-12-2005, 20:15
  4. CSS: fp:first-letter
    Von [d] im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 26-06-2003, 23:20
  5. input form und netscape
    Von kakalake im Forum Allgemeines
    Antworten: 5
    Letzter Beitrag: 14-10-2001, 16:33

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •