Restrict html tags in textbox

At times you might encounter situations where the customer wants to restrict certain characters from being entered into a textbox. A common scenario is to restrict users from entering the html tags like < and > symbol from being entered into the textbox.
Using javascript you can achieve this very easily. What you need to understand here are the different events that gets fired when we press any key on the keyboard.

1. KeyDown - A key is pressed down.
2. KeyPress - A character key is pressed
3. KeyUp - A key is released.

Now although KeyDown and KeyPress may seem to be the same but they are not. Keydown is triggered on any key press. KeyPress triggers after KeyDown event but it is only guaranteed for character keys.

So, after having this basic understanding, we can move ahead with the requirement and that is to restrict users from entering the "<" and ">" characters.

function RestrictTags(sender, event) {
        var key = event.which ? event.which : event.keyCode;
        var shiftKey = event.shiftKey;
        if ((shiftKey == true) && ((key == 188) || (key == 190))) {
            return false;
        }
        return true;
    }


The above code snippet shows how you can restrict "<" and ">" tags from being entered. Let me briefly explain you what the above piece of code does.

event.which - It returns the numeric keyCode of the key pressed or the character code (charCode) of the alphanumeric key pressed.
event.shiftKey - It is a boolean attribute that helps in identifying if a shift key is pressed or not.

So, if you look at the keyboard, in order to press the "<" or ">" key, you need to press the Shift key and then the "<" and ">" key.

188 is the keyCode for both , and <
190 is the keyCode for both . and >

So, in order to differentiate whether 188 is coming because of comma or less than symbol key press and 190 is coming because of period key or greater than key pressed, you make use of event.shiftKey.
So if you have the event.shiftKey attribute set to true and the keyCode is 188 that means you have pressed > . Similarly if you have event.shiftKey to true and the keyCode is 190 that means you have pressed <.

So that explains the if condition above. Rest is self explanatory. Calling the above method on the keydown event, you can restrict the user from entering the > and < characters.

You can call the event like below

<input id="txtName" type="text" onkeydown="return RestrictTags(this,event);"/>

Hope that helps !!!

Accessing People Editor control using jQuery in SharePoint

Dear Readers,

Recently I came across a requirement where I had multiple people editor controls on the page and I had to fetch the login name of the resolved user corresponding to each of these people picker controls. My requirement was to fetch all these login names using javascript or jquery. Now I tried all the old convention methods that used to work when we have only one people picker on the page. To my surprise, even if I provide the id corresponding to the respective people picker, the conventional javascript methods used to return the value of the first people editor only. So, in nutshell, none of the conventional methods worked for me.
So, I started exploring how does these people editor controls render on the page. Now, using IE developer tool, the html that came in front of me was very complex. Lot of spans and divs are rendered for just one single people editor control. But in its complexity was the simplicity of the solution that laid behind my eyes in that html code in front of me.

For my kind readers out here, I am pasting the html snippet for one of my people editors on the page.

So if you look at this code snippet, you see that a div with the id ending with 'peopleEditorProductOwner_upLevelDiv' gets generated for my people editor.

var htmlPeopleEditorControl = $("[id$='peopleEditorProductOwner_upLevelDiv']");

The html that gets returned based upon this element has a div with id "divEntityData" and an attribute "key" which holds the value for the account name.

So based upon this we can find the account name for all the people editor controls on the page.

Below is the sample jquery snippet to fetch the same for one control.

var accountName = $("#divEntityData", htmlPeopleEditorControl).attr("key");

where 'peopleEditorProductOwner' is the people editor id of my control.

Similarly for all other people editor controls on the page, you can fetch the login name.

Hope this piece of information might be helpful.

Cheers,
Geetanjali