HTML5 Canvas multi-line textboxes - javascript

Okay, so, essentially, I'm getting user input from an <input> tag and shoving it into a canvas. This is all well and good for one line, but there are some cases where I need whole paragraphs of text. As we are all aware, not every letter is of the same width, which means I can't have multiple <input> tags with a maxlength attribute. It's also jarring to have multiple input tags. Long story short: Is there any way to put PARAGRAPH textboxes into a HTML5 canvas element?

Why can't you go ahead and use a textarea to get multiline handling?
<textarea name="myTextArea" cols="30" rows="5" />

Related

Check for a line-break in a div

On my page I use a textarea to input a text and that text is splitted into words and added to a div. At this point there is no problem. The div has a fixed width of 600px and if the text is to long the div starts a new line. Everything pretty normal as far. Now I need to detect, that there was a linebreak, so I can move the text after the linebreak into a new div. Is it somehow possible to detect that linebreak?
I already tried the include() with /n or <br> or <br/>, also the same with matches() and regex expression how many /n are in the text but nothing seems to work. Now the question is: is there even a way to detect that linebreak and if so how would I do that?
Right now I have a javascript function that is called if an input happens in the textarea
<textarea oninput="textfield_handler()" class="form-control" id="tf-input"></textarea>
In the function I check the linebreak with an if-statement
if(lastChild.innerHTML.includes("<br/>"))
{
console.log("LINE BREAK");
}

How to disable HTML formatting using innerHTML?

I'd like to generate an input field that is able to "copy" it's value into another element (in my case paragraph).
All is working so far but I got massive problems when I try to input some text strings like ...
< b> text < /b> // without the space columns
multiple backslashes
... or other HTML attributes / tags...
because changing the innerHTML will format this text into HTML text. But I want to use plain text including these tags / special characters instead.
Input some HTML text<input oninput="out1.innerHTML=this.value" type="text" placeholder="input text">
<p id="out1"></p>
----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.innerHTML=this.value" type="text" value="<b>x</b> \\ %&">
<p id="out2"></p>
How can I disable HTML formatting in this specific case (to copy exact the same text into the paragraph element without styling) without using a textfield / a second input field instead?
I thought about using .html() with jQuery but there also must be some more efficient way using only javascript.
I think you should try using Node.textContent
Because as the docs are saying:
Element.innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. However, textContent often has better performance because the text is not parsed as HTML.
Input some HTML text<input oninput="out1.textContent=this.value" type="text" placeholder="input text">
<p id="out1"></p>
----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.textContent=this.value" type="text" value="<b>x</b> \\ %&">
<p id="out2"></p>
You want .innerText rather than .innerHtml. This references the rendered text node. innerHtml, on the other hand, sets HTML content here, not simply text nodes.

Why when I try to display the text inside a textarea on html it display eveything in one line?

I have the following code:
<body>
<form>
<textarea id="textfield"></textarea>
<input type="button" onclick="func1()" value="Post">
</form>
<p id="para"></p>
</body>
When I type in textarea all the special tags <a>,<br> etc are ignored when I display them inside a <p> also all what I typed is displayed on one line and it doesn't even matter that I pressed return or use <br>, textarea seems to be taking html tags and turn them into a simple text.
This is the function I use to display the text area in html:
function func1()
{
document.getElementById("para").innerHTML=document.getElementById("textfield").innerHTML;
}
How do I take text from textarea and display it on screen normally(not in one line).
How do I modify textarea for a user who doesn't know how to use tags? when pressing a simple return should be translated to <br
First of all, for textareas you should use value and not innerHTML. Like this...
document.getElementById("para").innerHTML=document.getElementById("textfield").value;
Now, for the single line issue. In textarea, new lines are separated by \n. In your divs \n do not work. So you'll have to replace them with <br> tags. So rewriting your code snippet...
document.getElementById("para").innerHTML=document.getElementById("textfield").value.replace(/\r\n|\r|\n/g,"<br />");
The text in the textarea isn't html. It is just text, containing regular line break "\n". To display them, you either need to enclose the text in a pre tag, or replace the "\n" with <br>.
I would do the latter, since pre doesn't break at all if there's no break in the text, so you'll have a single long line and a scrollbar.
<textarea> does not take HTML and interprets it. I think what you are looking for is a Rich Text Editors if you want your users to be able to modify text without knowing the tag names

Styling letters of a word within an input differently, possible?

Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'
I would like the 'Te' to be bold and then have the 'st' be regular.
It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.
Any ideas on how this might be accomplished?
Don't think it is possible (will do some more test).
What about adding a contenteditable div which looks like a input?
Simple contenteditable exmaple: http://jsfiddle.net/PpEx7/
EDIT
Nopez not possible. :)
You should take a look at how HTML WYSIWYG editors are build.
Basically, they
hide the input field and display another html element with the styled content:
Highlight text as you type on textarea
or
use design mode in html:
javascript Rich Text Editors
both ways are not trivial...
If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.
The best you can do is use :first-letter
But As you can see it does not work on <input />
No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.
However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this.
Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:
<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->
No kiddin.

How do you make linebreaks in a HTML textarea result in breaks in the string?

I have a HTML <textarea> that I want to be able to make when the user pushes enter in the textarea it results in a linebreak when the string is stored in a variable and printed on the page.
How would I do this? I have seen it done before but I am not sure how to do it.
When you read the content of textarea just do this:
var text = document.getElementById(textAreaId).value.replace("\n","<br/>");
By this way, when you use the variable text, it will be able to break lines in html.
You should set the white-space property on your output to one of the pre values. See here for a list of allowed values and their effects: http://www.w3schools.com/CSS/pr_text_white-space.asp
<p style="white-space: pre;">Your text with newlines goes here.</p>
Or simply use <pre>, a HTML tag that has white-space: pre; by default, but this has the inconvenient of changing your font.
I would advise against storing <br />s instead of new line characters. If you want to have HTML breaks add them just to the output.
Assuming you are outputting as HTML, you'll need to replace the line breaks with <br> or wrap the text with the <pre> tag.
The <pre> tag defines preformatted
text.
Text in a pre element is displayed in
a fixed-width font (usually Courier),
and it preserves both spaces and line
breaks.

Categories