How to append a child element to an input text field with javascript

Question

0.00/5 (No votes)

See more:

I am trying to listen when a space button is hit after the user types a bunch of letters into an input text field. Then I need to style the already typed text so it becomes a bootstrap button and then append it to the input text field as a tag. I have tried this code but it's not working

What I have tried:

JavaScript

function handleKeyUp(evt) {
  //get the input text field
  let tagInputs = document.getElementById("tags");
  //check if the character is space 
  if(evt.key ==' ') {
       //create a new button element 
       let ftext = document.createElement('button');
       //style the button with bootstrap
       ftext.style.cssText = 'btn btn-primary' ;
       //add space before trying to add the tag
        tagInputs.value+= ' ';
       //add the button as a tag
        tagInputs.innerHtml = ftext;
     }

Posted 11-Jul-23 19:11pm

Tim the Gamer

Updated 11-Jul-23 21:40pm

Add a Solution

Comments

Richard Deeming 12-Jul-23 4:29am

You'd probably have better luck using a pre-built JavaScript component - for example, tagify[^].

Tim the Gamer 12-Jul-23 5:50am

Thanks for the clue, I hope it does need some kind of extra dependency such as node js installed on my machine?

Richard Deeming 12-Jul-23 5:53am

It's a client-side JavaScript library. The only time you'd need to install Node.js is if you wanted to install it using the Node Package Manager (npm).

With Visual Studio 2019 or later, you can use the build-in client-side library manager to install the library instead:
Use LibMan with ASP.NET Core in Visual Studio | Microsoft Learn[^]

Or you could just download the "dist" folder from GitHub and manually add that to your project.

Tim the Gamer 12-Jul-23 8:01am

Okay , let me try it out. Though from their screenshots on Github they do not have the styling or its just tweaking the css around ?

Richard Deeming 12-Jul-23 8:08am

There's a CSS file in the dist folder:
https://github.com/yairEO/tagify/blob/master/dist/tagify.css[^]

It's relatively easy to override the styles to fit in with the rest of your site. For example, I needed less than 30 lines of custom CSS to fit in with a Bootstrap 4 theme.

Tim the Gamer 12-Jul-23 11:59am

Okay if I run into errors while deploying the dist folder to my project then I will reach out to you for help

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2023-07-11T21:40:00

Solution 1

You can't append new elements to an input's HTML, you need to wrap the input within another element and prepend the new buttons to the wrapper element instead. Here's a JSFiddle showing what I mean[^], though you may need to tweak it a bit because it doesn't wrap elements correctly.

As you can see from the example, the input is wrapped within a div element, and we then prepend the buttons to the div element (before the input field). Also the innerHTML property is meant to take a string value, not an element reference.

Posted 11-Jul-23 21:40pm

Chris Copeland

Comments

Tim the Gamer 12-Jul-23 4:12am

I am trying to reproduce how Stackoverflow tagging mechanism works with no success. Did they wrap the input text inside a div and then when user types a tag they overlay it over the div that encapsulates the input element?

Chris Copeland 12-Jul-23 4:23am

Yes exactly, you can right-click and inspect element of the tags input box and you'll see that there's an input, but it's also wrapped in a div (with class "js-tag-editor tag-editor") which is where the elements get prepended. The code sample I've given you mimics what their tag editor does, it just needs tweaking and styling.

Tim the Gamer 12-Jul-23 5:56am

How do they compute the offset of the cursor inside the editor so the line moves next where the last tag was added

Chris Copeland 12-Jul-23 6:46am

Not sure what you mean, in the sample I provided you can see the text input automatically shifts to the right as tags are added. This is because the parent div is set to a flex row, buttons prepended will move the input, which basically copies the same effect? If you're after the functionality where a backspace puts the text back in then all you'd need to do is add a key listener for a backspace, if the text input is empty then simply take the last button's text, prepend it into the input and then remove the button from the div.

Tim the Gamer 12-Jul-23 8:02am

Got it Thanks