javascript - onClick - Edit textfield - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

Bruger #14767 @ 10.06.09 22:39

Kunne godt tænke mig, at finde ud af hvordan man gør sådan så hvis man trykker på et ikon ved siden af noget stykke tekst. Så skal den valgte tekst skiftes ud med et textfield.

Her er et billede på hvad jeg mener:

http://www.wetoz.dk/ex.jpg

Når man klikker på det ikon til venstre, skal teksten ved siden af skifte om til et textfield. Men det SKAL være det stykke tekst, som står ved siden af ikonerne og ikke teksterne nedeunder.

Håber i fatter hvad jeg mener

9 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #5789 @ 11.06.09 15:29

640

Du kan f.eks. have både en label og en textbox, hvor du gør label usynlig og textbox synlig, når du klikker på din button

HTML kode

 <head runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function showTextBox(labelId, textBoxId)
         {
             document.getElementById(labelId).style.display = "none";
             document.getElementById(textBoxId).style.display = "block"; 
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <table>
             <tr>
                 <td>
                     <label id="FirstLabel" >some text</label>
                 </td>
                 <td>
                     <input type="text" id="FirstTextBox" style="display:none" value="some text" />   
                 </td>
                 <td>
                     <button id="FirstShowButton" onclick="showTextBox('FirstLabel', 'FirstTextBox')" >Show text box</button>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>

Hvorfor vil du bruge en LABEL, det giver da ingen mening overhovedet. En label er et tag der bruges SAMMEN med en anden kontrol.

Skal du bruge noget der giver mening, så skal det være enten: p, div, span

Men princippet er fint:

- Lav en span, div eller p, med et id
- Lav en textbox med et andet id
- Sæt display: none; for din textbox
- Når du klikker på en knap toggles de to kontrollers display. display: none -> display: ; og display: ; -> display: none;

- hvis du toggler tilbage ændrer kopierer du værdien (.value) fra din textbox til din div/span/p's .innerHTML

Hvis du absolut skal kommenterer andres semantik, så forklar mig lige hvorfor du vil have et element i tabel cellen? - det giver jo heller ingen mening.

/J

Bruger #13106 @ 12.06.09 15:27

display:none kontra display:block er måden, hvorpå dette kan løses.

Har du kun testet eksemplet i Firefox?

I IE laver den ikke postback, når man klikker på knappen, det gør den i Firefox. Hvis du returnere false i dit onclick event virker det også i Firefox.

HTML kode

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function showTextBox(labelId, textBoxId)
         {
             document.getElementById(labelId).style.display = "none";
             document.getElementById(textBoxId).style.display = "block"; 
             return false;
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <table>
             <tr>
                 <td>
                     <p id="FirstLabel">some text</p>
                 </td>
                 <td>
                     <input type="text" id="FirstTextBox" style="display:none" value="some text" />   
                 </td>
                 <td>
                     <button id="FirstShowButton" onclick="return showTextBox('FirstLabel', 'FirstTextBox')" >Show text box</button>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>
 </html>

Hvis det ikke er løsningen til dit problem skal du måske prøve at forklare igen, hvad dit problem er.

Indlæg senest redigeret d. 12.06.2009 15:28 af Bruger #13106

Bruger #13106 @ 10.06.09 23:49

Du kan f.eks. have både en label og en textbox, hvor du gør label usynlig og textbox synlig, når du klikker på din button

HTML kode

 <head runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function showTextBox(labelId, textBoxId)
         {
             document.getElementById(labelId).style.display = "none";
             document.getElementById(textBoxId).style.display = "block"; 
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <table>
             <tr>
                 <td>
                     <label id="FirstLabel" >some text</label>
                 </td>
                 <td>
                     <input type="text" id="FirstTextBox" style="display:none" value="some text" />   
                 </td>
                 <td>
                     <button id="FirstShowButton" onclick="showTextBox('FirstLabel', 'FirstTextBox')" >Show text box</button>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>

Bruger #14767 @ 11.06.09 10:26

Du kan f.eks. have både en label og en textbox, hvor du gør label usynlig og textbox synlig, når du klikker på din button

HTML kode

 <head runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function showTextBox(labelId, textBoxId)
         {
             document.getElementById(labelId).style.display = "none";
             document.getElementById(textBoxId).style.display = "block"; 
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <table>
             <tr>
                 <td>
                     <label id="FirstLabel" >some text</label>
                 </td>
                 <td>
                     <input type="text" id="FirstTextBox" style="display:none" value="some text" />   
                 </td>
                 <td>
                     <button id="FirstShowButton" onclick="showTextBox('FirstLabel', 'FirstTextBox')" >Show text box</button>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>

Med dit eksempel fjerner den redigerings boksen lige så hurtigt som man trykker på Show text box knappen

Bruger #10846 @ 11.06.09 13:30

Du kan f.eks. have både en label og en textbox, hvor du gør label usynlig og textbox synlig, når du klikker på din button

HTML kode

 <head runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function showTextBox(labelId, textBoxId)
         {
             document.getElementById(labelId).style.display = "none";
             document.getElementById(textBoxId).style.display = "block"; 
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <table>
             <tr>
                 <td>
                     <label id="FirstLabel" >some text</label>
                 </td>
                 <td>
                     <input type="text" id="FirstTextBox" style="display:none" value="some text" />   
                 </td>
                 <td>
                     <button id="FirstShowButton" onclick="showTextBox('FirstLabel', 'FirstTextBox')" >Show text box</button>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>

Bruger #13106 @ 11.06.09 18:22

Jeg har vidst aldrig lavet en ærlig html side i mit liv. Programmerer udelukkende i .net, så det er nok derfor jeg tænker i labels. På trods af min label så det nu ud til at mit eksempel gav lidt mening alligevel!!!

Forresten virker mit eksempel fint, når man har det i en aspx side i Visual Studio. Det var desværre det eneste mit begrænsede intellekt formåede at gøre på det sene tidspunkt.

Bruger #14767 @ 12.06.09 11:56

Nogle som har et godt bud på hvordan dette kan laves?

Bruger #10846 @ 12.06.09 20:21

Du kan f.eks. have både en label og en textbox, hvor du gør label usynlig og textbox synlig, når du klikker på din button

HTML kode
 <head runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function showTextBox(labelId, textBoxId)
         {
             document.getElementById(labelId).style.display = "none";
             document.getElementById(textBoxId).style.display = "block"; 
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <table>
             <tr>
                 <td>
                     <label id="FirstLabel" >some text</label>
                 </td>
                 <td>
                     <input type="text" id="FirstTextBox" style="display:none" value="some text" />   
                 </td>
                 <td>
                     <button id="FirstShowButton" onclick="showTextBox('FirstLabel', 'FirstTextBox')" >Show text box</button>
                 </td>
             </tr>
         </table>
     </div>
     </form>
 </body>
Hvorfor vil du bruge en LABEL, det giver da ingen mening overhovedet. En label er et tag der bruges SAMMEN med en anden kontrol.

Skal du bruge noget der giver mening, så skal det være enten: p, div, span

Men princippet er fint:

- Lav en span, div eller p, med et id
- Lav en textbox med et andet id
- Sæt display: none; for din textbox
- Når du klikker på en knap toggles de to kontrollers display. display: none -> display: ; og display: ; -> display: none;

- hvis du toggler tilbage ændrer kopierer du værdien (.value) fra din textbox til din div/span/p's .innerHTML
Hvis du absolut skal kommenterer andres semantik, så forklar mig lige hvorfor du vil have et element i tabel cellen? - det giver jo heller ingen mening.

/J

Jeg ville nok ikke have lavet tabellen på den måde. Jeg ville have placeret både <span> og <input> i samme celle. Så det er derfor jeg ville have et element i cellen. For mig giver det fin mening.

Ved du bedre da?

Bruger #10846 @ 12.06.09 20:30

Jeg har vidst aldrig lavet en ærlig html side i mit liv. Programmerer udelukkende i .net, så det er nok derfor jeg tænker i labels. På trods af min label så det nu ud til at mit eksempel gav lidt mening alligevel!!!

Forresten virker mit eksempel fint, når man har det i en aspx side i Visual Studio. Det var desværre det eneste mit begrænsede intellekt formåede at gøre på det sene tidspunkt.

Det er også logisk nok. Men en ASP.NET Label bliver jo konverteret til en span alligevel

onClick - Edit textfield

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler