Saut de ligne en Javascript

Version imprimable

Bonjour à tous,

Meilleur voeux 2022 ;)

Je suis actuellement occupé à créer un site en PHP, j'ai dans ce site une liste déroulante type SELECT..

A chaque sélection dans cette liste, je prends le contenu affiché/sélectionné pour l'ajouter un champ type input, toutefois j'aimerais un saut de ligne à chaque ajout

Voici mon souci : le contenu s'ajoute bien dans mon champs mais je ne parviens pas à ajouter le saut de ligne dans le "onchange:...."

J'ai testé la basile <br>, </br>, /n, //n, sans succès et je ne suis pas certain de la bonne syntaxe...

Merci pour votre aide ;)

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <label>Choisir une/des panne(s):</label> <select id="list" style="width:150px" onchange="document.getElementById('displayValue').value=document.getElementById('displayValue').value+this.options[this.selectedIndex].text;document.getElementById('displayValue').value = document.getElementById('displayValue').valeur.replace(code+'\r\n', '');"> <option value="">Selectionner panne</option> <option value="Radio HS">Radios HS</option> <option value="Antenne cassée">Antenne cassée</option> <option value="Ecran HS">Ecran HS</option> <option value="Problème d'émission">Problème d'émission</option> <option value="Problème de réception">Problème de réception</option> <option value="Pas de service">Pas de service</option> <option value="Bouton rotatif cassé">Bouton rotatif cassé</option> <option value="Bouton latéral HS">Bouton latéral HS</option> <option value="Baterie HS">Batterie HS</option> <option value="Haut parleur HS">Haut parleur HS</option> <option value="Micro HS">Micro HS</option> </select> <input type="text" name="displayValue" id="displayValue" style="width:183px;height:123px">

03/01/2022, 13h34
Doksuri

developer.mozilla.org/fr/docs/Web/HTML/Element/Input/text

Citation:

Les éléments <input> dont l'attribut type vaut "text" permettent de créer des champs de saisie avec du texte sur une seule ligne.

si tu veux autoriser plusieurs lignes, tu devras passer par un <textarea> developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
03/01/2022, 14h24
jfsylbe

Merci beaucoup :D

Sans vouloir abuser de votre gentillesse, le saut de ligne je dois utilise </br> ou //n ?

mon code ne semble pas fonctionner...j

Code:

<select id="list" style="width:150px" onchange="document.getElementById('displayValue').value=document.getElementById('displayValue').value+this.options[this.selectedIndex].text;document.getElementById('displayValue').value = document.getElementById('displayValue').valeur.replace(code+'\r\n', '');">
03/01/2022, 14h50
SpaceFrog

Essaye

Code:

.replace(code+'\\r\\n', '')
03/01/2022, 14h58
jfsylbe

1 pièce(s) jointe(s)

Merci mais ça ne fonctionne pas..

pas de saut de ligne ....

Pièce jointe 611181

Bananier 2022,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<p>
  <label>Choisir une/des panne(s):</label>
  <select id="list" style="width:150px" >
    <option value="">Selectionner panne</option>
    <option value="Radio HS">Radios HS</option>
    <option value="Antenne cassée">Antenne cassée</option>
    <option value="Ecran HS">Ecran HS</option>
    <option value="Problème d'émission">Problème d'émission</option>
    <option value="Problème de réception">Problème de réception</option>
    <option value="Pas de service">Pas de service</option>
    <option value="Bouton rotatif cassé">Bouton rotatif cassé</option>
    <option value="Bouton latéral HS">Bouton latéral HS</option>
    <option value="Baterie HS">Batterie HS</option>
    <option value="Haut parleur HS">Haut parleur HS</option>
    <option value="Micro HS">Micro HS</option>
 
  </select>
</p>
<p>
  <textarea name="displayValue" id="displayValue" style="width:183px;height:123px"></textarea>
</p>

Code:

1
2
3
4
5
6
7
8
window.addEventListener("DOMContentLoaded", (event) => {
  "use strict";
  const list = document.getElementById('list');
  const displayValue = document.getElementById('displayValue');
  list.addEventListener('change', (e) => {
    displayValue.value += list.value + "\n";
  });
});

03/01/2022, 18h23
jfsylbe

merci beaucoup !!

la solution de jreaux62 fonctionne parfaitement.

Encore merci pour votre aide, je marque le post comme résolu !!!