I am trying to use a text area to gather input from the user and then when the user clicks a done button. I grab the textarea value and insert it into Raphael text object. Easy enough. However, I realized after typing out a paragraph in the text area that a number of things occur. Here are a couple of things that occur.
Although in the text area it looks like its on multiple lines it actually just puts it all on one line. (Makes sense after thinking about it for two seconds)
When I hit enter it puts the text onto a new line but if I hit enter and add mulitples new lines above the text it just ignores them.
So basically what I am asking is does anyone know the best way or any way that is more consistent and efficient to take textarea text and formatting it properly to look the same way in Raphael. Tips tricks would be appreciated.
Related
Goal: JavaScript code to link fields to auto fill once top field is full. Lines will range from 2 to 5 (have multiple areas with different total number of lines in each.)
Want to be able to have lines visible. Acrobat's current option for multiple lines auto sizes text and line spacing to fit, so visible lines don't work. User currently has to recognize that field is filling (type is auto sizing to fit) then physically move cursor down to next line.
Example (link below): Comments: Would like this area to auto fill across top line then automatically jump to next line to continue comments.
I work with Acrobat a lot but have very little knowledge of writing JavaScript code. Any help will be greatly appreciated.
You have a few options:
Do not care about the writing lines, and use the font size/line
spacing provided by the multiline field.
Use the richText feature of the field.
Work with individual connected fields on the writing lines.
To 3: (I go backwards with these comments): Looking like the simplest solution. However, the crucial property is only available in the Keystroke event, which means it does not work when you fill the fields via script or prefill.
To 2: You can preset the properties of the field for manual filling. For filling via script, you would have to create a richText Object. This is not thaaat difficult, but can be a bit complicated.
To 1: This is the easiest way, and, because filling out on screen or via script does not need writing lines; so, you can make the background of the multiline field white and cover the writing lines.
If ever possible, I would go for option 1.
This question is based on Trouble getting real time word count from html textbox.
I am also fairly new to Javascript, and would please like some help in understanding the examples presented on this page. There are multiple lines in the code, in the different examples that have a "text area" tag, yet there is only one text area on the screen. Is this correct?
What I am looking to do is to have multiple text areas on the page, all of which will feed into another page via a form (this part I understand). But, I only want one of the boxes to have the real time word count.
Can someone please assist? Thanks.
You know how when you start typing in Instant, the suggestions for words you want start to come up, and the #1 suggestion is some grey text beside the word? That is what I am interested in trying to mimic (in javascript, prefer), but for text fields and text areas.
I thought about getting the x and y coordinates of the current caret position, and placing the grey text there. However, I'm not sure if this is the best option, because if I want to place that grey text in the middle of a sentence, or what have you, then the rest of the text would have to be shifted over to make room. Not to mention the fact that I haven't yet found a good way to even get the x and y coordinates of the caret in a textfield or textarea. For these reasons, this option just seems inefficient.
Also, the code can not be the same or near the same as what Google has. One additional feature I want is having the grey text appear in the middle of sentences, which Google's code doesn't support. So, that would need to be included in the solution.
Does anyone have an idea (or some code) of how to achieve this? I have been pondering this for a while and haven't really gotten anywhere.
Thanks!
JQuery has a wonderful autocomplete plugin.
i know <textarea name="textarea" disabled="disabled">dsds</textarea> can disable write in the textarea ,
but how to disable one line i want to disable in the textarea ?
not all line
thanks
That's not possible without JavaScript, even then:
You need to enable contentEditable
You need to write your own editor...
You need to figure out what happens if someone deletes or inserts a line and therefore moves the disable one around
You need to figure out what to do when someone hits enter in the line above the disabled one or backspace at the beginning of the line below the disabled one...
To sum it up, a textarea is the wrong approach here, better use multiple input's for whatever you want to do here, of course you will need to make it look like it's one textarea and you'll still need some JavaScript to make return work as expected (?), but then again you didn't specify what you want to do with this stuff.
Yes, use multiple input texts appear like a single text area, let's call it fake text area. That way disabling one would be easy.
Do not put any margin in between them and no border, all having same width.
Assign incremental ids to each one - like input-1,input-2 etc.
If you want to prefill some text into the fake textarea, calculate the maximum length that can be accomodated into a single input and fill line by line using javascript (jquery would be better).
When cursor is at the end of an input text and enter is pressed, take cursor to next text input. Define a function for every such possibility and call it.
On posting the form, append the input values together to get the actual value of the faked text area.
I guess there may be difficulties in faking a scrollbar for such a textarea but once implemented, should work fine. Any existing plugins like this?
Updates
- For handling cursor positions, refer these things. I did not try myself but may be useful - Jquery Caret position and How to get cursor position in textarea and you can apply the cursor position getting-setting logics. Somehow try to get the actual click position and force the cursor to stay there.
I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field.
Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle.
I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle.
Unless I am using the wrong keywords, google searches return no helpful results, and I'd really appreciate your input about this topic.
Best Regards
Seref Arikan
Ps: any books/resources about advanced browser dom based graphics with javascript be appreciated also.
I would recommend looking at this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
It's not exactly what you want, but you might be able to adapt it. The work of finding text in running content and then manipulating it is a little messy.
edit note that that plugin is for text in the HTML document, not text in input text fields or in <textarea> blocks. That would be pretty hard to do, but possibly somebody's done it.
I suggest you use multiple, borderless text fields, each containing a single part of the text(words or letters) and wrap groups as needed in span styled with a border and the triangle as a positioned background image.