I'm attempting to write a very basic script using javascript. What I want to do is be able to detect whenever a textarea is modified, and then make some changes to other elements.
This is my jsfiddle: http://jsfiddle.net/QDRHT/1/
I'm attempting to detect whenever a new character is entered into the textarea, then modify the background color of a nearby div. However, it's not working at all, and I can't tell why (I'm new to Javascript, although I did make sure to validate my HTML and CSS, and run the javascript through JSLint).
If it matters, I'm running this in IE 9.
Change onKeyPress to onkeypress eg all lower-case characters and should work.
DEMO
The window.onload handler will not be triggered, because you add this within other load event's handler.So remove it. Also instead of onKeyPress use onkeypress(all letters should be lowercase).
Changed version is here.
Related
So I'm trying to make a chrome extension for Zendesk that auto capitalizes a certain words as I type.
it was working before but now it doesn't. it's probably because of the update that Zendesk made to their editor that you can no longer update or replace the text of the element inside this div[contenteditable]
I tried everything like using innerHTML, textContent, jQuery's text(), etc.. but none of these have worked anymore.
it just keeps on reverting the text to the old one.
I believe there's a function that's been trying to block all of the text alteration being done to the editor.
I tried to remove all of the input event handlers including keyup/keydown, compositionstart and compositionend to the element but it still keeps on reverting my changes
Update:
Uppdate 2: using execCommand
Use jQuery val() method:
$('#demo').val('hello');
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? ;)
If the user enters a certain word into a text box I would like a second text box to appear on the screen (for them to enter new information). Does anyone know how to do this in javascript or jquery (and if in JQuery what library must I include?)
You can do it using JavaScript keyUp event, if you would like to make it using jQuery, this page is a good place to start.
What you want to do is add a onkeyup function to the textbox and inspect the value of the textbox everytime your method is called, based on this value you can then do whatever else is necessary
I will program it up in javascript (which I know quite well but haven't used in a while) using the onkeyup event - I didn't want to reinvent the wheel so thought I'd ask as surely someone has done this before but I realise now from being voted down that stackoverflow is not open to this kind of approach - i.e. you need to put in the time and only if failing ask a question.
I was hoping also for some advice about using jquery which I haven't used much but of course it can be done in 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.
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)