décoder du HTML dans une textbox de façon dynamique avec du JS

Version imprimable

Bonjour à tous,

S quelqu'un a une idée.... J'ai 2 TextBox's: une sert de saisie de code HTML l'autre retranscris en texte (visualisation) ce code HTML via du javascript. Mais rien ne se passe comme prévu (çà serait trop simple...) J'ai l'impression que le javascript n'est pas du tout exécuté... Est-ce que le javascript peut s'appliquer sur une TextBox??

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<%@ Page Language="C#" MasterPageFile="~/MasterPageAccueil.master" AutoEventWireup="true" CodeFile="visuHTML_1.Aspx.cs" Inherits="cgv" Title="Visualisation HTML" %>
 
<asp:Content ID="Content3" ContentPlaceHolderID="CPH_contenu" Runat="Server">   
 <div>
    <div>
        <asp:Label ID="LabelHtml" runat="server" Text="Code HTML" Font-Bold="True" Font-Size="Small" Visible="False"></asp:Label> 
         <br />        
         <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="720px" Width="49%" Visible="false"></asp:TextBox>
   </div>
   <div>
        <asp:Label ID="LabelRetranscription" runat="server" Text="Retranscription du code" Font-Bold="True" Font-Size="Small" Visible="False"></asp:Label> 
        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Height="720px" Width="49%" Visible="false"></asp:TextBox> 
   </div>
 </div>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#TextBox2").html($(this).val());            
            $('#TextBox1').keyup(function (e) {
                var textBox1 = $(this).val();
                $('#TextBox2').html($(this).val(textBox1));
            });
            $('#TextBox2').keyup(function (e) {
                var textBox2 = $(this).val();
                $('#TextBox1').html($(this).val(textBox2));
            });
        })
    </script>
</asp:Content>

Y a -til des personnes qui ont déjà été confronté à ce problème??
J'attends vos réponse, remarques.....

@++

petite modification çà marche un peu mieux comme cela mais toujours pas le résultat attendu la textbox est vide... :weird:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
<%@ Page Language="C#" MasterPageFile="~/MasterPageAccueil.master" AutoEventWireup="true" CodeFile="visuHTML_1.Aspx.cs" Inherits="cgv" Title="Visualisation HTML" %>
 
<asp:Content ID="Content3" ContentPlaceHolderID="CPH_contenu" Runat="Server">   
 <div>
    <div>
        <asp:Label ID="LabelHtml" runat="server" Text="Code HTML" Font-Bold="True" Font-Size="Small" Visible="False"></asp:Label> 
         <br />        
         <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="720px" Width="49%" Visible="false"></asp:TextBox>
   </div>
   <div>
        <asp:Label ID="LabelRetranscription" runat="server" Text="Retranscription du code" Font-Bold="True" Font-Size="Small" Visible="False"></asp:Label> 
        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Height="720px" Width="49%" Visible="false"></asp:TextBox> 
   </div>
 </div>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=TextBox2.ClientID%>").html($(this).val());            
            $('#<%=TextBox1.ClientID%>').keyup(function (e) {
                var textBox1 = $(this).val();
                $('#<%=TextBox2.ClientID%>').html($(this).val(textBox1));
            });
            $('#<%=TextBox2.ClientID%>').keyup(function (e) {
                var textBox2 = $(this).val();
                $('#<%=TextBox1.ClientID%>').html($(this).val(textBox2));
            });
        })
    </script>
</asp:Content>

Tu ne pourras pas visualiser le code html dans un TextBox, passe plutôt par un div éditable.

Code:

<div contenteditable="true" id="visualisation"></div>

Ensuite, pour faire fonctionner le tout :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
    <script type="text/javascript">
        $(document).ready(function () {         
            $('#<%=TextBox1.ClientID%>').keyup(function (e) {
                var text = $(this).val();
                $('visualisation').html(text);
            });
            $('#visualisation').keyup(function (e) {
                var text = $(this).html();
                $('#<%=TextBox1.ClientID%>').val(text);
            });
        })
    </script>

26/01/2015, 09h33
chamox187

Merci puuck!

J'avais trouvé le fait de passer par une div pour implémenter l'HTML et de la passer en "runat="server" mais je ne savais pas que l'on pouvait l'éditer avec "contenteditable"! Super! :ptdr: