How to Insert dot(.) again in textarea, if we have created a function to replace it?

Question

I have created a function to replace dot(.) into purnviraam, it works fine. but If we need to insert ". " again in textarea, I have created a button neart textarea with function. it inserts dot"." but pressing shift, it also converts in purnviraam. Please guide me, I don't have much knowledge of js coding.

 $(function() { $('textarea').on("keyup", function(e) { var val = $(this).val(); var str = val.replace('.', String.fromCharCode(2404)); $(this).val(str); }); }); function myFunction1() { insertfullstop.data.value += '.'; document.getElementById("data").focus(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td colspan="1"> <form id="insertfullstop"> <textarea type='text' id="data" class="js-copytextarea" style="width: 100%; max-width: 400px; height: 200px; border-radius: 6px 6px 6px 6px;" name="data" autofocus="" placeholder="Start Type Here................"></textarea> </form> </td> </tr> <tr align="right"> <td style="padding-top: 5px; float='center' padding-left: 1px; " colspan="1"> <strong style="font-size: 16px;"></strong> <button id="fullstop" OnClick="myFunction1()" class="btn1" title="Full Stop" type="button">.</button> </td> </tr> </table>

Answer 1

The problem is that you replace. with | on EVERY keyup event, which means that; you can add the dot with your function correctly but when you type the textarea it is going to replace the previously added dot with |

To solve this: check if the typed character is a dot or not. If it is a dot, only then, replace it with a |. This way, it will not replace the previously added dot.