WN - Förvandla text till textbox (jQuery)

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Förvandla text till textbox (jQuery) (https://www.wn.se/forum/showthread.php?t=1045185)

mojitoo

2010-12-02 22:29

Förvandla text till textbox (jQuery)

Hej!

Ni har säkert stött på lösningarna där man kan klicka på en text för att den ska bli en textbox. Om ni har missat detta så testa att klicka någonstans i följande tabell: http://andrewplummer.com/demos/tablegear/

Jag har letat febrilt på Internet efter en lösning för detta via jQuery men det närmsta jag har har kommit är hur man lägger in en text i textboxen.

Så därför undrar jag om någon av er skulle kunna vara vänlig att hjälpa mig med denna lösning.

Det jag är ute efter är alltså att en text. Exempelvis namn: James Bomd

Så vill jag när man klickar på James bond att den förvandlas till en textbox som det står James Bond i. Jag antar att någon av er har skapat en sådan lösning och jag skulle bli riktigt glad om någon av er kunde hjälpa mig med detta.

Magnus_A

2010-12-02 22:32

Du har både text och textbox med text i bredvid varandra, sen är det bara att visa den ena och dölja den andra.
Sen måste du se till att du uppdaterar texten med det som står i textboxen vid blur.

Syke	2010-12-03 14:19

eller så kan man skriva jquery koden som gör att när man klickar på texten omsluts den av textarea-element?

youheardit

2010-12-03 15:08

HTML:

Kod:

<div style="width: 120px; height: 30px;">

<div id="selector">James Bond</div>

<input type="text id="textinput" style="width: 120px; height: 30px;" style="display: none;" />

</div>

jQuery

Kod:

$(document).ready(function(){



   $("#selector").click(function(){

         

           $("#textinput").val() = $("#selector").html();

           $("#textinput").show(); $("#selector").hide();

          

    })



});

Clarence

2010-12-03 17:49

Det finns gott om plugins till jquery som är desto mer flexibla och färdiga än youheardit:s kod. T ex Jeditable - http://www.appelsiini.net/projects/jeditable

mojitoo

2010-12-03 17:49

Tack så mycket men hur märker jag om jag är utanför boxen igen?

För jag vill att den återgår till vanlig text om man klickar någon annanstans på sidan. För det känns inte som att jag kan göra en click(function) då eller? Jag vet åtminstone inte vad jag skulle sätta den på.

mojitoo

2010-12-03 17:50

Citat:

Ursprungligen postat av Clarence (Inlägg 20381229)

Det finns gott om plugins till jquery som är desto mer flexibla och färdiga än youheardit:s kod. T ex Jeditable - http://www.appelsiini.net/projects/jeditable

Tack, ska kolla även denna.

taz76

2010-12-05 23:23

Finns massa färdiga lösningar också :)

http://plugins.jquery.com/plugin-tags/editable

allstars

2010-12-06 08:16

Citat:

Ursprungligen postat av mojitoo (Inlägg 20381230)

blur heter det eventet när man lämnar focus på elementet, men det kanske finns andra sätt också.

martine

2010-12-06 17:10

Låter lite överflödigt att använda jQuery till en så enkel sak (som utan vidare går att göra med javascript). Men, visst är det så man vill göra så...

dAEk	2010-12-06 20:50

Citat:

Ursprungligen postat av martine (Inlägg 20381674)

Låter lite överflödigt att använda jQuery till en så enkel sak (som utan vidare går att göra med javascript). Men, visst är det så man vill göra så...

Ska du såga andra personers förslag får du gärna visa hur du skulle göra istället

martine

2010-12-07 10:30

Citat:

Ursprungligen postat av dAEk (Inlägg 20381702)

Ska du såga andra personers förslag får du gärna visa hur du skulle göra istället

Jag sågar ingens förslag men ifrågasätter om jQuery är det optimala sättet att lösa ett ganska enkelt problem.

Kort och gått skulle man väl använda något liknande:

Kod:

onclick="var el=this.replaceChild(createElement('input'),this.firstChild);this.firstChild.value=el.nodeValue"

(Vilket för all del borde göras till en metod till elemented it fråga och putsas till att göra exakt vad som nu önskas.)

tartareandesire

2010-12-07 20:47

Flyttade ut diskussionen rörande jQuery till en ny tråd:

http://www.wn.se/t1045244.html

Alla tider är GMT +2. Klockan är nu 19:08.