Editable text in Laravel-CodePudding

I need to make a text that can be edited by user but in some parts I need to make static text for example the date and ....,how to make it ,plz can anyone help me

I have tried the normal input but it did not work as I expected

CodePudding user response：

you can define editable part in page for each section, after type in input with js concatenation all text in main input, and in submit just pass main text to back-end.

like bellow:

<input type="hidden" name="text" id="main-text-id">

<input  type="text">
<input  type="text">
<input  type="hidden"> <!--static part-->
<input  type="text">
<input  type="hidden"> <!--static part-->
...

and your script :

<script>
    const mainText = document.getElementById('main-text-id');
    const inputs = document.querySelectorAll('.text-part');

    inputs.forEach(input => {
        input.addEventListener('input', () => {
            mainText.value = Array.from(inputs).map(input => input.value).join(' ');
        });
    });

</script>