Sentence editing word

JavaScript
1

Hi need help please, I want to have a sentence that the word can be edited like this example

“In the end, we all felt like is eat too much”.

then when the user hovers some words it will show underline meaning it can be edited but that depends on how I set up in the backend what word can be edited to show underline. then if the user clicks the example of the word is eat then the textbox appears so that he can type the correct word. when the user wants to edit the word “ In ” this will show textbox and the previous word that he edited will reset it’s to the original word.

I don’t know if I’m doing right by adding span to the word I want to edit. then I used the replaceWith my problem is how I can get back the original text if I click to another span to edit ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style type="text/css">
        .edit:hover{
             text-decoration: underline;
        }

    </style>

</head>
<body>


<div class="container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-primary card-outline">
                    <div class="card-body">
                        <p><span class="edit">In the end,</span> we all felt like <span class="edit">is eat</span> too much</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- JavaScript Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<script type="text/javascript">
 $(function(){
            $('span.edit').on('click',function(){
                $( this ).replaceWith("<input type='text'>");
            });
        });

</script>


</html>

please help me to acheive

Thank you in advance

2

I’m not sure if this is a viable approach but you can edit normal text if you add the attribute contenteditable=“true” to it.

e.g.

<div class="edit">
  <p>“<span class="editable" data-original-text="In" contenteditable="true">In </span> the
    <span class="editable" data-original-text="end" contenteditable="true">end</span>, we all felt like we <span class="editable" data-original-text="eat" contenteditable="true">eat</span> too much”.
  </p>
</div>

If you just run that code in the browser it will let you click and edit the text.

I also placed some data attributes in the span that indicate what the original text was so that you could compare with js and reset back to normal if the span is clicked somewhere else.

The problem that needs to be overcome is that you say you only want one item to be changed at a time and then reset a previous selection back to normal. You will need to mark a selection as changed with a dynamic class or data attribute so that you can find it when another item is changed.

One option may be that every time you click on an editable word the whole sentence is set back to normal and then the current item can be changed. The only problem with this is that if the user clicks on the word but then leaves it the same and then the previous selection would be lost. Therefore you probably need to only change the other words once a word has been accepted as new which means some sort of confirmation action will be required after editing a word.

It may therefore be easier to popup a box to add the new word inside which can then have a close button to confirm.

Once you can define the logic in straight forward steps then the easier it will be to work towards a solution :slight_smile:

1 Like
3

Wow paul thank you “contenteditable” this is my first time to use it, thanks to this approach, this will be serve as my starting point I will play around to add text field when click. :slight_smile:

4

I like this too :slight_smile: actually I have 5 sentences , then if the user will not edit word on the 5 sentences, then he cannot press the next button. I have this next button to enable only if he edited the 5 sentences.

6

Hi need help please JS Gurus, as @PaulOB suggested to reset the whole sentence when I click the editable word

but my problem is I cannot replace it with a text field the one I click the edited word. , also I noticed that when it replaced my span will be lost, and I cannot append it again.

I’m confuse.

please help

Thank you in advance.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style type="text/css">
        .editable:hover{
             text-decoration: underline;
        }

    </style>

</head>
<body>


<div class="container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-primary card-outline">
                    <div class="card-body">

                        <div class="edit">
                            <p>“<span class="editable" data-original-text="In" contenteditable="true">In </span> the
                                <span class="editable" data-original-text="end" contenteditable="true">end</span>, we all felt like we <span class="editable" data-original-text="eat" contenteditable="true">eat</span> too much”.
                            </p>
                        </div>


                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- JavaScript Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<script type="text/javascript">
        $(function(){
            $('p').on('click','span',function(){
                $orignalString = $(this).parent('p').html();
                 var attr = $(this).attr('data-original-text');

                  if($(this).attr('contenteditable')){
                      var attr = $(this).attr('data-original-text');

                      $(this).parent('p').html($orignalString);
                      $(this).find("[data-original-text='" + attr + "']").replaceWith("<input type='text'>");

                  }

            });
        });

</script>


</html>
7

Hi I was working on a rough demo and came up with this:

It still needs debugging and is very verbose code but the basics seem to work ok. there are probably bugs in it but it may help with your project.

1 Like
8

Wow nice, I think I will just stick on this, I will just scratch my idea on replacing it with a text field.

Thanks paul

9

I will convert this to jquery, I’m not used to using pure javascript.

10

I have question if I have 5 sentences , should I put them to array ? so that they will not be affected when editing and reseting each sentence?

11

It depends on how you are building this and what the ultimate aim is going to be?

Are you going to display random sentences 1 at a time?
How do you determine when to show a new sentence?

You can either store them in the JS or store them in the html but just hide them until needed.

Without knowing all the requirements its hard to give the full answer. :slight_smile:

12

It won’t be much different (apart from the overhead of the library).

Roughly like this:

1 Like
13

Hi Paul,

something like this display the 5 sentences together, then the user should edit the word in each sentence and all word in the sentence are editable .

1. I hope that, when I’ve built up my savings, I’ll be able to travelling to Mexico.

2. Did you know there, along with gorgeous architecture, it’s home to the largest tamale?

3. Once you know all the elements, it’s not difficult to pull together are sentence

4. We is agreed; it was a magnificent evening

5. I hope there, when I’ve built up my savings, I’ll be able to travel to Mexico

Thank you in advance

14

You’ll need to change the JS to reference the current line when you have more than one line. That means finding the current parent item and just traversing that row and passing relevant information to the required functions. It’s pretty much the same though and only needs a few tweaks.

I’ve added two rows but it will now handle multiple rows without changing the JS as long as you follow the format.

Keep the punctation and spaces out of the editable word spans as you don’t want any confusion.

2 Likes
15

Wow thank you so much Paul, it’s a big help for me , it works :smiley:

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.