Anyone knows a technique or method to find the position of the natural text line breaks in a textarea using javascript? It's not about finding \n or <br/>'s.
It is not possible to do this directly, but the answer to this question uses a trick to find them where it adds characters one by one and checks for scrolling:
finding "line-breaks" in textarea that is word-wrapping ARABIC text
Related
So, I am creating a program that will take an uploaded text file, read its text and highlight certain things (through injecting <span> with specific classes) into the file and display on a webpage. What I am having trouble with is how I can show these results.
I was initially using <textarea>, but I found that apparently, it does not recognize those <span> tags I have injected, so it just displayed as plain text. I tried using other approaches like <p> or <span> or <article> but it seems that all of those other ones will either
remove spaces accordingly (the text file uses a ton of spaces to format the text too and that needs to be retained), or
it will not recognize multi-line strings
So, some may suggest that perhaps I can simply inject a <br/> tag at all line breaks, which is a viable option for sure. The problem with the spaces that are truncated still remains if I do that. Not to mention that the tags will mess up a lot of my <span> formatting injection that I was trying to do, which relies on regex currently but that's at least doable.
What would be the best way to overcome this problem? Is there an obscure tag that will work best for the purpose here? Or what you be my best course moving forward?
Just use a <div> and convert all the space characters to if you really want to retain them (although it kind of goes against the way HTML is intended to work, but it's up to you).
And and all the newline characters need to be converted to <br/> - again the way HTML does layout is completely different to how a text file does it.
I'm using nicedit, which uses a contenteditable DIV-tag as input field, on a page where a user can enter and format some text, which then is submitted to a php-script which converts this formatted text into an image.
The text in this contenteditable div is getting word-wrapped with no line-break characters where it is wrapped.
Is there any way to find out where this wrapping occurred, or insert line-breaks when occurrs, so that I can access the text as separate lines?
You'll have to calculate the pixel co-ordinates of each word, which is possible but non-trivial to achieve cross-browser. One way would be to insert a zero-width dummy element before each word and use its position. Recent WebKit and Firefox browsers give you a getClientRects() method of DOM Range objects, which is preferable as it is less invasive and likely performs better. IE's proprietary TextRange objects have methods to move between words and properties boundingLeft and boundingTop that will give you the bounding box of the TextRange.
Try a different approach, change the way you're rendering that image. Perhaps you can find a graphics library that handles word wrapping automatically, or replicate the HTML on the page and take a snapshot using PhantomJS or similar.
I'm looking for a way to apply some formatting to a single-line text input field in JavaScript. It would work like this:
The user types in a formula, such as:
(7 + 3) ^ x
As the user types, my code would format it using colour to look like this:
I can do the necessary parsing but I don't know how to apply these styles to the user's text as they edit.
I've been struggling to find the right thing to Google for. My searches mostly lead me to full-blown text editors.
Is there such a component? If not, can I achieve this with a <input type="text"...> field?
Out of curiosity I built this: http://jsfiddle.net/hunter/npbDL/
This catches key strokes and inserts a span-wrapped character into an element. If the character maps to an item in the character-to-class collection it also gives that span the class specified.
It also handles enter and backspace.
You can probably take it from there...
I think the only way you can achieve the styling you want is by wrapping HTML tags around individual characters then styling the tags, and I don’t think you can do that inside an <input type="text">.
There is the widely-supported contenteditable attribute which makes most elements editable, but I’m not sure that it allows this either. If no-one else provides a better answer, you might want to view source on the last example here: http://www.hyperwrite.com/Articles/contenteditable.aspx
You can't format a text field with various colors. You might be able to use colors in WYSIWYG editors... or Flash.
I don't think you can change of individual characters in any <input> nor <textarea>. Look into source code of Etherpad for example - it uses similar system (not exactly the same - it highlights other stuff) and it might help you.
How can I do some manipulations with the text in a TextBox on resize in Adobe InDesign CS5?
The main goal is too split the last word on every row to achieve something like a custom hyphenation.
Is it possible using JavaScript (or ExtendScript?) ?
Thanks.
UPDATE
I've tried to describe my problem in comments
I need an example on ExtendScript, which would find textbox dimensions and hyphenate the text according to dimension and after I'd like to create an event on textbox resize, which would do the same thing after every resize.
You'll probably be able to write a script to do what you want, but the functionality is already built into InDesign.
If I understand your problem correctly it's InDesign does not hyphenate Armenian properly? You can insert manual hyphenationsin the text using the text tool and pressing 'Ctrl'+'-' where you want the hyphen in the text. Unfortunately you'll have to do that everytime you resize the box, because the words will move around - which is probably the problem you're having.
You can set the language in InDesign in the Character tab (shortcut is 'Ctrl'+'t') and upload custom dictionaries/word lists with rules specific to your language including rules for spelling and hyphenation. Unfortunately I couldn't find Armenian in my short search, but perhaps you're more lucky.
Check out the link for more details:
http://help.adobe.com/en_US/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6f4da.html
I would like to know the word at the position of the text insertion pointer in a form on a webpage. My problem is that I don't really know what language to use to do this, and I have no idea how to do it in Javascript.
Any ideas?
You are looking for
get caret position javascript IE
firefox
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
Here is how to find moused over word on page
How to get a word under cursor using JavaScript?