I lose focus of my after i have a regex replacement

Question

Here is the code that is not working:

// money related syntax (yellow)
var SyntaxmoneyReg = /\b(StartingCurrency|Hello)(?=[^\w])/g

function myFunction() {
  var input = document.getElementById("myInput")
  var data = input.value;
  document.getElementById("demo").innerHTML = "You wrote: " + data;
  data = data.replace(SyntaxmoneyReg, '<span class="code-money">$1</span>');
  input.innerHTML = data;
  document.getElementById("myInput").focus();
}

.code-money { color:blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

  <p>Write something in the text field to trigger a function.</p>

  <input type="text" id="myInput" oninput="myFunction()" contenteditable="true">

  <p id="demo"></p>

</body>
</html>

After my "data.replace" detects a match, everytime I enter a letter I lose focus of the textbox.

Not sure what you mean by detects a match, you might want to elaborate? Or give a sample of what is the match? What I do notice is when you erased the textbox back to empty you lose focus of the textbox. — Mukyuu, Dec 13 '18 at 02:17
@Mukyuu what i mean is, when you type "Hello" (one of the words its looking for) and then try to type after that, you keep on losing focus — Jaiden Destroyer, Dec 13 '18 at 02:21
Yeah, I've tried typing "Hello" but I'm not losing focus. I lose focus when I erased text from textbox to empty ("") — Mukyuu, Dec 13 '18 at 02:22
@Mukyuu did you put a space in between? try "Hello testing123" and you should lose focus — Jaiden Destroyer, Dec 13 '18 at 02:24

Mukyuu · Accepted Answer · 2018-12-13T03:22:52.817

1

I've moved the </span> from the initial data replace. The problem lies in $1</span>.

Modifying into $i+'</span>' fix the lost focus issue.

To activate your span styling you need to fix your innerHTML. The issue lies in document.getElementById("demo").innerHTML = "You wrote: " + data;. You can remove the document.getElementById("demo").innerHTML = "You wrote: " + data; and input.innerHTML = data;.

Adding var div= document.querySelector('div');

Then modifying div.innerHTML = "You wrote: " + data;

Solve the problem.

You could also remove document.getElementById("myInput").focus(); it was redundant.

Try the following fiddle:

// money related syntax (yellow)
var SyntaxmoneyReg = /\b(StartingCurrency|Hello)(?=[^\w])/g

function myFunction() {
  var input = document.getElementById("myInput");
  var div= document.querySelector('div');
  var data = input.value;
  data = data.replace(SyntaxmoneyReg, '<span class="code-money">$1'+'</span>');
  div.innerHTML = "You wrote: " + data;
}

.code-money { color:blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

  <p>Write something in the text field to trigger a function.</p>

  <input type="text" id="myInput" oninput="myFunction()" contenteditable="true">

  <div id="demo"></div>

</body>
</html>

edited Dec 13 '18 at 03:22

answered Dec 13 '18 at 02:40

Mukyuu

6,436
8
40
59

it seems to wrap **all** the text in the , the point of the is to be able to change the color of the word. – Jaiden Destroyer Dec 13 '18 at 02:43
I don't see the element? – Jaiden Destroyer Dec 13 '18 at 03:06
If you turn on console.log(data); after replacement you would notice "Hello testing 123" – Mukyuu Dec 13 '18 at 03:08
You need to fix your innerHTML. Check the updated fiddle. – Mukyuu Dec 13 '18 at 03:18
this seems to only style the "you wrote" text, that part was only for testing if the function was firing, it's actually supposed to style the word in the input – Jaiden Destroyer Dec 13 '18 at 14:14
For further information on styling word in the input you can check [here](https://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value). TL;DR: styles will apply to the whole input only. – Mukyuu Dec 14 '18 at 01:58

I lose focus of my after i have a regex replacement

1 Answers1