How to add linefeeds in a variable that is inserted in an HTML form?

I have a macro that expands a variable with multiple variants, separated by linefeeds:


I've tried with \n, \\n, %NewLine% and %Return% behind each line, but the lines aren't separated when displayed in the form:

What am I doing wrong here?
HTML prompt VI.kmmacros (15.1 KB)

Linefeeds have no syntactic value in HTML, you could use something like <br>


<br>: The Line Break element - HTML: HyperText Markup Language | MDN

None of those symbols are supported in HTML. HTML is a completely different formatting language. I think you can start a paragraph with the characters:
<p>
and end it with the characters
</p>
(although there are other ways to insert newlines as well.) That's the direction you have to go. You can easily google the HTML language syntax and you will find many ways to start new lines. But the methods you were trying (like \n) are not part of the HTML language.

I had actually tried <br> before, but i t doesn't work:
Screenshot 2024-10-27 at 12.21.31

Alas, this doesn't work either:

What is the source text that winds up in Local_sourceTerms? Is it a set of two words side by side? Multiple rows of multiple words? I'm having trouble understanding what the input looks like, which makes it trickier to figure out how to set the output.

Can you give an example of what you're copying as the source?

-rob.

Linefeeds (\n) should work here, and you already have them in your variable.

But I think (not an HTML/JS coder) your functions are setting the wrong thing. Try setting the value rather than innerText, eg:

function der(){document.getElementById('leftBox').value = window.KeyboardMaestro.GetVariable('Local_der');
1 Like

Oh, sorry then about my misdiagnosis. I've never used \n in HTML.

You wouldn't. But I think the issue here (and I'm on tenterhooks waiting!) is that @ALYB is trying to set the text in a form field. That's just "normal" text, not HTML, so \n is a valid/sensible character.

Thank you @Nige_S. I got this HTML code from an earlier question in this forum.

Replacing .innertext with .value did bring the solution. I can work from here.

Many thanks!

You can use innerText to change the contents of heading elements, paragraphs, and similar. Demo:

InnerText Demo.kmmacros (3.5 KB)

Image

You could use that to spice up your dialog with labels that changed depending on which button you pressed. But better to have an actual label for your field and change that. A quick google found How to change the text of a label using JavaScript ? - GeeksforGeeks

And this is the final result:
1

2 Likes