Seleziona porzione testo textarea

[zazoom]

Salve a tutti ... non ne riesco a venire a capo. Premetto che non sono un asso in js

Cerco di spiegarmi nel modo più chiaro possibile :

es... ho 5 campi di testo...
<input name='dc' id='dc' type='text' value='parole-uno' size='60' >
<input name='dc' id='dc' type='text' value='parole-due' size='60' >
<input name='dc' id='dc' type='text' value='parole-tre' size='60' >
<input name='dc' id='dc' type='text' value='parole-quattro' size='60' >
<input name='dc' id='dc' type='text' value='parole-cinque' size='60' >

Poi ho una textarea :

<textarea name="tag" cols="80" rows="23">
parole-uno
parole-due
parole-tre
parole-quattro
parole-cinque
</textarea>

Avrei bisogno che su onClick di un campo di testo (esempio : <input name='dc' id='dc' type='text' value='parole-uno' size='60' > ) venga selezionata 'parole-uno' nella textarea ... e così via per tutti gli atri campi di testo.

Grazie in anticipo per qualsiasi suggerimento

[ninja72]

Intendi cosi ?

const inputs = document.querySelectorAll('input[name="dc"]')
const tarea = document.querySelector('textarea[name="tag"]')

inputs.forEach(input => {
    input.addEventListener('click', (e) => {
        const index = tarea.value.indexOf(e.target.value)
        const len = index + e.target.value.length
        tarea.focus()
        tarea.setSelectionRange(index, len)
    })
})

[zazoom]

Gentilissimo e scusami, ma ho appena letto... questo già è troppo complesso per me :-)
Dreamweaver mi segna errore su : inputs.forEach(input =>{ - o : inputs.for Each(input => {
e in pagina non funziona
Screenshot_1.jpg

function seleziona() {

const inputs = document.querySelectorAll('input[name="dc"]')
const tarea = document.querySelector('textarea[name="tag"]')


inputs.for Each(input => {
    input.addEventListener('click', (e) => {
        const index = tarea.value.indexOf(e.target.value)
        const len = index + e.target.value.length
        tarea.focus()
        tarea.setSelectionRange(index, len)
    })
})
}

[ninja72]

Dreamweaver lo utilizzavo 30 anni fà, ora per fortuna c'è "visual studio code" aka vscode.
Non si capisce perchè ti segna quell'errore, ma forse sta lavorando in modalità inferiore alla ES5, dunque non riconosce ne funzioni freccia, ne il foreach applicato alle nodelist, prova in questo modo e vedi se ti segna sempre l'errore, comunque a prescindere dall'errore il codice funziona su firefox, chrome ed altri browser. (forse non su < IE11)

const inputs = document.querySelectorAll('input[name="dc"]')
const tarea = document.querySelector('textarea[name="tag"]')

Array.from(inputs).forEach(function (input) {
    input.addEventListener('click', function (e) {
        const index = tarea.value.indexOf(e.target.value)
        const len = index + e.target.value.length
        tarea.focus()
        tarea.setSelectionRange(index, len)
    })
})

[zazoom]

Dreamweaver lo utilizzavo 30 anni fà

Aeeee.... e lo so che sono anziano :-)

Adesso non segna errore ma in pagina non funziona.

Non vorrei sembrare un perfetto idiota ... ma la funzione la devo richiamare in <input onClick="seleziona()" name='dc' ... ?

O dico un'enorme sciocchezza?

[ninja72]

No onClick() non va messo, viene generato per ogni input dal codice con addEventListener().
Se la pagina è pesante in ternimini di kilobyte o megabyte forse è meglio inserire tutto all'interno del codice sotto :

window.addEventListener("DOMContentLoaded", () => {
  ...
});

Ti posso domandare :
1) Quale browser e versione stai utilizzando ?
2) Dreamweaver ha un webserver buil-in oppure ne utilizzi uno di terze parti per testare la pagina ?
3) La console del browser riporta errori di qualche genere (F12>console) ?
4) come carichi lo script sulla pagina html5 ?

[zazoom]

Ti posso domandare :
1) Quale browser e versione stai utilizzando ? Chrome 113.
2) Dreamweaver ha un webserver buil-in oppure ne utilizzi uno di terze parti per testare la pagina ? Lo uso solo per compilare ma testo direttamente su web server
3) La console del browser riporta errori di qualche genere (F12>console) ? No - ti allego screen zazoom.jpg
4) come carichi lo script sulla pagina html5 ? <!DOCTYPE HTML>

quindi aggiungendo :

<script type="text/javascript">
window.addEventListener ("DOMContentLoaded", () => {
const inputs = document.querySelectorAll('input[name="dc"]')
const tarea = document.querySelector('textarea[name="tag"]')


Array.from(inputs).forEach(function (input) {
    input.addEventListener('click', function (e) {
        const index = tarea.value.indexOf(e.target.value)
        const len = index + e.target.value.length
        tarea.focus()
        tarea.setSelectionRange(index, len)
    })
})
});




</script>

Ho fatto pagina di prova e funziona correttamente. Ti ringrazio davvero tanto ... ma sulla pagina dove mi serve non va. Devo vedere che cosa gli da fastidio.

[ninja72]

Allora sul quarto punto mi sono espresso male io, intendevo dire in che parte del file html carichi lo script , se sull'head oppure prima della chiusura del tag body. Se lo script è caricato sull'head ricorda che va inserito la priprietà "defer".

<script defer>
...
</script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input name='dc' id='dc' type='text' value='parole-uno' size='60'>
    <input name='dc' id='dc' type='text' value='parole-due' size='60'>
    <input name='dc' id='dc' type='text' value='parole-tre' size='60'>
    <input name='dc' id='dc' type='text' value='parole-quattro' size='60'>
    <input name='dc' id='dc' type='text' value='parole-cinque' size='60'>

    <textarea name="tag" cols="80" rows="23">
parole-uno
parole-due
parole-tre
parole-quattro
parole-cinque
</textarea>
    <button data-open>open modal</button>
    <script>
        window.addEventListener("DOMContentLoaded", function () {
            const inputs = document.querySelectorAll('input[name="dc"]')
            const tarea = document.querySelector('textarea[name="tag"]')

            Array.from(inputs).forEach(function (input) {
                input.addEventListener('click', function (e) {
                    const index = tarea.value.indexOf(e.target.value)
                    const len = index + e.target.value.length
                    tarea.focus()
                    tarea.setSelectionRange(index, len)
                })
            })
        })
    </script>
</body>

</html>
Questo è l'esempio completo, verifica se eveventualemente trovi.

[ninja72]

Allora sul quarto punto mi sono espresso male io, intendevo dire in che parte del file html carichi lo script , se sull'head oppure prima della chiusura del tag body. Se lo script è caricato sull'head ricorda che va inserito la priprietà "defer".

<script defer>
...
</script>

Inoltre nel punto 3 mi non mi stai mostrando gli errori della console ma i problemi generici.

Questo è l'esempio completo, verifica se eveventualemente trovi.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input name='dc' id='dc' type='text' value='parole-uno' size='60'>
    <input name='dc' id='dc' type='text' value='parole-due' size='60'>
    <input name='dc' id='dc' type='text' value='parole-tre' size='60'>
    <input name='dc' id='dc' type='text' value='parole-quattro' size='60'>
    <input name='dc' id='dc' type='text' value='parole-cinque' size='60'>

    <textarea name="tag" cols="80" rows="23">
parole-uno
parole-due
parole-tre
parole-quattro
parole-cinque
</textarea>
    <button data-open>open modal</button>
    <script>
        window.addEventListener("DOMContentLoaded", function () {
            const inputs = document.querySelectorAll('input[name="dc"]')
            const tarea = document.querySelector('textarea[name="tag"]')

            Array.from(inputs).forEach(function (input) {
                input.addEventListener('click', function (e) {
                    const index = tarea.value.indexOf(e.target.value)
                    const len = index + e.target.value.length
                    tarea.focus()
                    tarea.setSelectionRange(index, len)
                })
            })
        })
    </script>
</body>

</html>