Discussion :

[Pragmateek]

Bonjour,

voici la problématique :
fusionner trois zones de texte dont :
- une sur plusieurs lignes, en haut, non éditable,
- une petite sur quelques caractères, en dessous à gauche de la première, non éditable,
- une sur une ligne, à droite de la précédente, éditable .

Deux pistes :
Avec trois éléments :
- un textarea en haut,
- un span ou un inputext à gauche, sous le textarea,
- un input text éditable à droite du précédent .
Ce qui donnerait à peu près :

Code :

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

1
2
3
4
5
6
7
8
<div>
<textarea cols="50" rows="5" readonly="readonly">
</textarea>
</div>
<span readonly="readonly" >
abc
</span>
<input type="text" size="50" id="line" />

Problème :
Comment gérer l'alignement de ces trois éléments pour qu'ils s'ajustent et donnent l'impression d'un seul élément .

Avec deux éléments :
- un textarea en haut,
- un input text éditable en dessous du texte area dont une partie serait éditable et une autre partie non .
Problème :
Comment rendre une partie seulement d'un input text non éditable ?

Merci .

[Bisûnûrs]

Je n'arrive pas à voir le résultat que tu veux avoir. Peux-tu nous montrer un visuel de ce que tu souhaites obtenir ?

[Alain Defrance]

Comment rendre une partie seulement d'un input text non éditable ?

Tu peut pas, par contre si tu veux donner l'impression, tu peut effectivement coller des input cote a cote, et enlever certaintes bordure (merci CSS) pour donner l'impression d'un seul champ de saisie.

[Pragmateek]

Le but est d'obtenir un effet de shell :
- en haut les anciennes lignes de commandes,
- en bas la ligne courante avec :
-- à gauche le prompt
-- à droite la commande entrée par l'utilisateur .

Il faudrait donc que les trois "rectangles" s'ajustent pour paraître comme un seul grand rectangle .

Ce qui donnerait à peu près :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div>
<textarea cols="80" rows="5" id="buffer" style="background-color : black;color : white;border:none" readonly>
</textarea>
</div>
 
<span readonly="readonly" style="width:10px;background-color:black;color:white;border:none;">
&gt;
</span>
<span style="width:500px">
<input type="text" size="78" style="background-color:black;color:white;border:none;" id="line" />
</span>

Le problème avec ce code est que la taille des éléments est directement inscrite dans le code, alors qu'il faudrait soit que :
- la taille des deux éléments du dessous s'adapte à la largeur du textarea en haut
- la taille du textarea s'adapte à celles des deux éléments du dessous .

De plus le résultat diffère fortement d'un navigateur à l'autre .

Merci .

[Pragmateek]

Finalement cette question aurait peut être plus sa place dans le forum CSS .

Si un modo passe par là et veut bien la déplacer ...

Merci .

[Pragmateek]

Voilà ce qui donne presque l'effet souhaité sous Firefox 2 :

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
 
<style type="text/css">
td,tr
{
        padding : 0px;
}
table
{
        border-collapse: collapse;
}
</style>
<table>
        <tr>
                <td colspan="2">
                        <textarea cols="80" rows="10" id="buffer" style="background-color : black;color : white;border:none" readonly="readonly">
                        </textarea>
                </td>
        </tr>
        <tr>
                <td>
                        <span readonly="readonly" style="background-color:black;color:white;border:none;" id="prompt">
                                &gt;
                        </span>
                </td>
                <td>
                        <input type="text" size="78" style="background-color:black;color:white;border:none;" id="line" />
                </td>
        </tr>
</table>

En revanche, sous Internet Explorer 6, Opera 9 et Konqueror l'input text et le textarea n'ont pas la même largeur .