Discussion :

[chamox187]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.....

@++

[chamox187]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Puuck]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ensuite, pour faire fonctionner le tout :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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!