How to format input in html using javascript

Question

How to format input text on html, sample input: Hi hello

I like to display the input like this

'Hi','hello',

When I hit enter, single quote with a comma will automatically display.

Any suggestion? Thank you.

Maik Lowrey · Accepted Answer · 2021-11-01 18:12:16Z

1

The text is then formatted and returned to the input field. You only need an eventlistener, a function that converts the text.

const input = document.getElementById('watch');
input.addEventListener('keypress', function (e) {
    e.preventDefault();
    if (e.key === 'Enter') {
      input.value = input.value.split(' ').map(s => `'${s}'`).toString() + ',';
    }
  return false;
});

<form>
  <input type="text" value="Hi World" id="watch">  
</form>

answered Nov 1, 2021 at 18:12

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklesh Raut · Accepted Answer · 2021-11-01 17:55:37Z

1

You can use split and join

const str = "Hi hello";
let output = '';
if(str)
     output = `'${str.split(" ").join("','")}',`;
 console.log(str);

answered Nov 1, 2021 at 17:55

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

Johnni O. · Accepted Answer · 2021-11-01 17:45:12Z

0

const string = 'a b c'
console.log(string.split(' ').map(str => `'${str}'`).toString() + ',')

answered Nov 1, 2021 at 17:45

Johnni O.

1318 bronze badges

Collectives™ on Stack Overflow

How to format input in html using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related