How to simulate typing into a textarea using Javascript/Jquery? - javascript

I have a textarea which uses a jquery plugin to resize itself while the user types in it.
The problem is, I want users to be able to edit things they've already typed. However since the textarea starts with 35 cols, 1 row, if the user had a long message he typed, then it doesn't completely show, only one line shows which cuts off.
Is there a way to simulate a keypress event in that textarea, so that the text resizing will fire up and resize the textarea?
There's no way to programatically call the text resize function.

Just trigger the keypress event on that textarea:
$(function(){
$('textarea').trigger('keypress');
}).
if there are multiple textareas, and you want to trigger the event on a specific textarea that has an id, of course the syntax becomes:
$(function(){
$('#myTextarea').trigger('keypress');
}).

If this is your own code, then you can just call your function
Your text area likely already has some function that gets called on each keystroke. The simplest way for you is then to call this same function when your page loads and that's it.
<textarea onkeypress="someFunc();" />
just call this someFunc when page loads and it should do the same thing as if you pressed a key.
Not written by you? Using third party plugins then
If you're using some sort of a jQuery plugin (not your own) then you should check whether it provides this functionality to initially set text area's size. If it doesn't then I suggest you switch to a different plugin that does that. Or write your own if you know how.

Related

Jquery detect textbox programmatic change

Long story short I am cowboying some code in which a custom framework I am using allows me to insert a script to manipulate the page to do what I want.
I want to fire a function, but only after the textbox I want to use has been populated from the webservice that gets called.
In Jquery/Javascript is there anyway to call a function like the jquery change function, but one that can detect when the textbox has been changed from javascript, and not by the user in the browser.
I currently just have:
$("#mytexbox").on('input propertychange paste change',function() {
doSomething();
});
But this does not fire when the original function in locked code sets the value of the textbox.
Note: I can not just overload the original function as most of it is built up from dynamic server side code that I can't mimic in Javascript.
I also want to avoid having to use setTimeout() as this is unreliable and not really a nice solution.
Thanks in advance!
Maybe you can use a hidden div or input and check the changes on this instead of changes on #mytextbox. Obviously, the user can not change the hidden div, but the script can. You get the trick? ;)

ckeditor and display users data as they type

I have a textarea that as the user enters data into the textarea, the data is displayed at the bottom of the form as a display of how their data may appear (much in the same way that StackOverflow gives a preview display of the users question as the user types it).
I have installed CKEditor 4.3.1 to this textarea and the preview display no longer appears.
I assumed that this was because the id of the text area had been replaced by the id of the CKEditor, so I tried replacing the id of the text area with the id of the CKEditor, but this approach did not work.
Is my thinkg wrong? I have read the CKEditor docs, but found nothing to help me.
What approach should I use to display the data as the user enters their data into the CKEditor?
This is because CKEditor runs next to your <textarea> in DOM (hides it first) and, in a matter of fact, it doesn't update contents of your <textarea> unless you request it or destroy the editor. That's how CKEditor works.
Call editor.updateElement to synchronize <textarea> with rich editor contents. You can use editor#change event to updateElement periodically and keep things in sync.
What might be the problem is that, quite likely, your existing code observes keyboard events (onkeyup, onkeydown) fired in <textarea> and updates the preview at the bottom of your page. You need to re-attach those callbacks to editor#change event because CKEditor doesn't trigger any events in <textarea> (as I mentioned, it doesn't interact with it at all). So there are two ways of solving your problem:
On editor#change call editor.updateElement and fire keyboard event from code on <textarea> (see the fiddle).
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar,undo',
on: {
instanceReady: function() {
// Show textarea for dev purposes.
this.element.show();
},
change: function() {
// Sync textarea.
this.updateElement();
// Fire keyup on <textarea> here?
}
}
} );
Attach existing preview update callbacks to editor#change.
I'm for 2. since 1. is a kind of hack. But it's up to you, of course.

Using Javascript/jQuery to trigger event when textarea rendered

I have a JSF page where I'm trying to tie the text in specific paragraphs to the contents of a set of textareas.
Getting the content to change when a textarea changes is dirt simple using onchange and onkeyup events:
onchange="$('dynamicParagraphId').text($(this).val());"
Unfortunately, I'm having some trouble initializing the paragraphs so that their text matches the textareas when the page is initially loaded.
Because of how the page is implemented, editing the underlying HTML is bloody difficult; I'm not sure how to implement an obvious solution like a script that triggers when the page loads, because it's going to take some real work for me to get a hold of the textareas' IDs. Is there some way to insert Javascript/jQuery code into the textarea definition that will trigger when the page loads so that I can make use of the this object and not have to figure out the textarea ID? Is there some feature of jQuery I can leverage that spares me needing to know the IDs?
Trigger the keyup event for all textareas, but you can probably come up with a more specific selector:
$(document).ready(function(){
$("textarea").keyup();
});
Or if you can only attach functions through inline markup for some reason you can add it to the <body>:
<body onload='$("textarea").keyup()'>
If you know how many textareas there are and which you want (i.e. the 5th on the page), you could easily query for all textareas:
document.getElementsByTagName("textarea");
and select the one you want. Another solution is to hand over the control to JS and render the textarea on the clientside.
http://jsfiddle.net/FExQy/

Can DIV replace TextArea

As we know can set contenteditable in DIV to allow editable. It can make same like Textarea.
However there's the most big different are the "content copy and paste" to DIV and Textarea.
DIV is allow html/plain but Textarea only serve plain text.
Below are the method to solve those problem:-
Method 1 - Direct using window.clipboardData.getData('Text') ( will prompt for asking permission).
Problem : Mozilla and chrome are not support clipboarddata.
Method 2 - Using flash.
Problem : Flash v.10 has upgraded to new rules which cannot get clipboarddata without user first initialize.
Method 3- Using "onpaste" event. When data paste on div -> Set focus
on hidden textarea -> Get value from hidden textarea and set into div
by using setTimeout -> clear hidden textarea.
Problem : The timing set value to hidden textarea are not consistent.
I have saw google was doing well on this.
For IE , use clipboarddata.
For Mozilla,others (not support html5) - Anyone know how google done it ?
Hint: use iframe designmode ?
For Chrome (support html5) - Just set DIV to Contenteditable="plaintext-only".
The trick that I use for this kind of thing is to have an offscreen <textarea>, which is not visible to the user.
The textarea is focussed and has a keyboard handler that notices whether the user is typing in the textarea. As I detect the user is typing, I grab the value of the textarea and dump it in the div.
This is the basic idea. You'll need a bit more to get the look and feel right:
you can't just hide the textarea with display:none or visibility:hidden because that will generally make it insensitive to typing and events too. So you need to make it really small and position it outside the screen, or stack it behind some other element.
you're going to have to detect whether the textarea blurs and decide if you need to refocus it.
You'll want a click handler on the div so that if people click the div you can focus to the textarea instead so people can start typing again.
The nice thing about this approach is that general keyboard handling, like ctrl+cursor, and cut+paste etc. all work exactly as expected without having to code that yourself - you're just piggybacking on the existing functionality of the textarea.
Here's an example of how this works:
http://js1k.com/2012-love/demo/1168
(A javascript shell)

Catching all changes to the contents of an input box using JavaScript/jQuery

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:
$('#input').bind('keyup cut paste', function(){...});
This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:
When the user selects a of text and drags it do a different position in the input box
When the user uses the Delete action in the right-click context menu
Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.
English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?
In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.
Demo (works in all browsers)
It's possible this SO question (and related jsfiddle) might answer your question.
(On the linked jsfiddle, put text in the top box to test)
In other words, bind to mouseup and mousedown, etc.
If you can't find a combination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.

Categories

Resources