Develop Reference

Detecting non tagged textarea or input fields

I made a Chrome Extension that allowed me to change certain characters if certain keystroke combinations were made to any input or text area field. It works fine as long as what I am typing in is a input or textarea field. However, when I go to a site like FaceBook and try their post or comments field, it doesn't work because those fields somehow don't have textarea tags in their source.
Here is what I currently use.
document.activeElement.onkeydown = function(){ getCharKeyDown(event) };
document.activeElement.onkeyup = function(){ getCharKeyUp(event) };
What would I need to do, to detect if a user is typing in a textarea that doesn't seem to actually be a text area (in plain JavaScript please)?
Thanks.

Thanks to epascarello, I think I've got it sorted. After a bit of reading about the HTMLElement.contentEditable property, I came across Document.execCommand() which seems to take care of all editable elements.
This was the main change I made
function insertAtCursor(myField, myValue) {
document.execCommand('insertHTML', false, myValue);
}
and now I am able to run my functions wherever.

Add a character count near a TextField in a SilverStripe Form

I want to add a character count to a TextField in a SilverStripe 2.4 Form.
When ever a user enters data in the TextField I want to show a message right beside or underneath the field displaying how many characters are left.
I have a JavaScript and Ajax call to count and post the character count, but if I try to display it by using by using LiteralField going to another <div> which is not my option, any other HTML tags going out of Form.
Note: SilverStripe creates a separate div for each Field in the Form, because of that I am not able to show any thing to the right of that field or the bottom of it.

You can use this Jquery code :
$(".TextField").onchange(function(event)
{
$(event.target).closest(".silverstripe2.4 TextFiled").textContent = $(event.target).val().length;
}

Titanium Ipad: How to restrict the textbox to allow specific format

I am new to Titanium. I am developing an ipap app using titanium. My app needs a textbox that allow only 1234AA or 1234 AA format.(AA/aa). i want to display a message under textbox "Invalid format: 1234 AA" while entering text in texbox.it should disappear after correct format is entered. I searched on google but i didn't find anything.
how to write the code for this?
Thanks!
I tried in another way that: I added a eventlistener 'click' to a button with code
submit.addeventlistener('click',function(){
pattern="[0-9]{4}\s?[A-Za-z]{2}";
var textfieldvalue=textfield.value;
if(!textfieldvalue.match(pattern))
{
var errorlabel=Ti.UI.createlabel({color:'black',text:'Invalid format:
1234AB'...});
win.add(error);
}
else{
//opening other window
}
});
its working but text box allowing more than 4 digits and more than 2 char (I given exact number in pattern)..what's wrong in my pattern?
Still I want this code for textfield (showing error message while typing in textfield until correct format is entered ) what event i have to use for textfield?

You can set "pattern" (regex) to the input field. In this case it'd be something like pattern="[0-9Aa]{4}\s?[0-9Aa]{2}".
Then you must set oninvalid event listener to the input field. This will fire when pattern match is not met. e.g oninvalid="showInvalidFormatMsg()" or preferrably fieldElem.addEventListener("invalid", showInvalidFormatMsg);
After this you can either use built-in tooltip with setCustomValidity function or just display as a text in DOM in that showInvalidFormatMsg
I'm unable to write working code atm. But if you're unable to follow these instructions and no-one has answered with full code, I try to find some free spot to help you with this.

How to change the entered text as hyperlink in the textbox?

How to display the text as hyperlink if the user entered in the text box...
For example if the user entered the text as
"my website name is google.com"...and submit it,
i have to show that text as "my website name is google.com"
Is there any plugin available for this or any simple script is enough?

function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
Thanks to:
How to replace plain URLs with links?

This is usually called "linkify" which I guess is a bit difficult to Google for if you don't know that.
Here is a jQuery plugin that will do this for you.

how to set different font-weights for characters in the same input box

I need to create an input box with an automplete functionality. So when a user enters "ja" , these first two characters will be in bold and "vascript" will be in grey.
For some reasons, I can't use the jquery autocomplete function. As the words that the user can enter are not that many, I created an array and assigned for each abbreviation , the word that matches .
words= [{abbv:"J", word="JAVA"}, {abbv:"JA", word:"JAVASCRIPT"}]
Then, when the user starts entering the word, I look in the array for the word that matches with the "abbreviation", and display that word inside the box .
This works fine, the problem now is that I'm trying to highlight the first characters entered by the user and keep the rest of the word in grey.
What I'm trying to do looks like this http://jsfiddle.net/wyVJW/894/ , except that I would like the word to be displayed inside the input box itself and not in a scroll down menu.
How can I set a font weight only on the the characters entered and not on the whole input box?

Input boxes do not support multiple styling. You need to overlay a DIV and use HTML within that DIV to "simulate" what you want to achieve visually and use CSS to make it still look as if it were an input box.
You will need to write some JavaScript to make this work.