}
// This is the keypress and textInput handler that filters the user's input
function filter(event) {
// Get the event object and the target element target
var e = event || window.event;         // Standard or IE model
var target = e.target || e.srcElement; // Standard or IE model
var text = null;                       // The text that was entered
// Get the character or text that was entered
if (e.type === "textinput" || e.type === "textInput") text = e.data;
else {  // This was a legacy keypress event
// Firefox uses charCode for printable key press events
var code = e.charCode || e.keyCode;
// If this keystroke is a function key of any kind, do not filter it
if (code < 32 ||           // ASCII control character
e.charCode == 0 ||     // Function key (Firefox only)
e.ctrlKey || e.altKey) // Modifier key held down
return;                // Don't filter this event
// Convert character code into a string
var text = String.fromCharCode(code);
}
// Now look up information we need from this input element
var allowed = target.getAttribute("data-allowed-chars"); // Legal chars
var messageid = target.getAttribute("data-messageid");   // Message id
if (messageid)  // If there is a message id, get the element
var messageElement = document.getElementById(messageid);
// Loop through the characters of the input text
for(var i = 0; i < text.length; i++) {
var c = text.charAt(i);
if (allowed.indexOf(c) == -1) { // Is this a disallowed character?
// Display the message element, if there is one
if (messageElement) messageElement.style.visibility = "visible";
// Cancel the default action so the text isn't inserted
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;
}
}
// If all the characters were legal, hide the message if there is one.
if (messageElement) messageElement.style.visibility = "hidden";
}
});
The keypress and textinput events are triggered before the newly input text is actually
inserted into the focused document element, which is why handlers for these events
can cancel the event and prevent the insertion of the text. Browsers also implement an
input event type that is fired after text is inserted into an element. These events cannot
be canceled, and they do not specify what the new text was in their event object, but
17.8  Text Events | 483
Client-Side
JavaScript
Pdf hyperlink - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
pdf edit hyperlink; pdf email link
Pdf hyperlink - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
adding hyperlinks to pdf documents; adding hyperlinks to pdf files
they do provide notification that the textual content of an element has changed in some
way. If you wanted to ensure that any text entered into an input field was in uppercase,
for example, you might use the input event like this:
SURNAME: <input type="text" oninput="this.value = this.value.toUpperCase();">
HTML 5 standardizes the input event and it is supported by all modern browsers except
IE. You can achieve a similar effect in IE by using the nonstandard propertychange
event to detect changes to the 
value
property of a text input element. Example 17-7
shows how you might force all input to uppercase in a cross-platform way.
Example 17-7. Using the propertychange event to detect text input
function forceToUpperCase(element) {
if (typeof element === "string") element = document.getElementById(element);
element.oninput = upcase;
element.onpropertychange = upcaseOnPropertyChange;
// Easy case: the handler for the input event
function upcase(event) { this.value = this.value.toUpperCase(); }
// Hard case: the handler for the propertychange event
function upcaseOnPropertyChange(event) {
var e = event || window.event;
// If the value property changed
if (e.propertyName === "value") {
// Remove onpropertychange handler to avoid recursion
this.onpropertychange = null;
// Change the value to all uppercase
this.value = this.value.toUpperCase();
// And restore the original propertychange handler
this.onpropertychange = upcaseOnPropertyChange;
}
}
}
17.9  Keyboard Events
The keydown and keyup events are fired when the user presses or releases a key on the
keyboard. They are generated for modifier keys, function keys, and alphanumeric keys.
If the user holds the key down long enough for it to begin repeating, there will be
multiple keydown events before the keyup event arrives.
The event object associated with these events has a numeric 
keyCode
property that
specifies which key was pressed. For keys that generate printable characters, the 
key
Code
is generally the Unicode encoding of the primary character that appears on the
key. Letter keys always generate uppercase 
keyCode
values, regardless of the state of the
Shift key since that is what appears on the physical key. Similarly, number keys always
generate 
keyCode
values for the digit that appears on the key, even if you are holding
down Shift in order to type a punctuation character. For nonprinting keys, the 
key
Code
property will be some other value. These 
keyCode
values have never been stand-
484 | Chapter 17: Handling Events
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
add hyperlinks to pdf; adding hyperlinks to a pdf
VB.NET PDF: Basic SDK Concept of XDoc.PDF
XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
adding links to pdf document; add links to pdf file
ardized, but reasonable cross-browser compatibility is possible, and Example 17-8 in-
cludes a mapping from 
keyCode
values to function key names.
Like mouse event objects, key event objects have 
altKey
ctrlKey
metaKey
, and 
shift
Key
properties, which are set to 
true
if the corresponding modifier key is held down
when the event occurs.
The keydown and keyup events and the 
keyCode
property have been in use for more
than a decade but have never been standardized. The DOM Level 3 Events draft stand-
ard does standardize the keydown and keyup event types, but it does not attempt to
standardize 
keyCode
. Instead, it defines a new 
key
property that contains the key name
as a string. If the key corresponds to a printable character, the 
key
property will just be
that printable character. If the key is a function key, the 
key
property will be a value
like “F2”, “Home”, or “Left”.
The DOM Level 3 
key
property is not yet implemented in any browsers at the time of
this writing. The Webkit-based browsers Safari and Chrome define a 
keyIdentifier
property in the event object for these events, however. Like 
key
keyIdentifier
is a
string rather than a number and it has useful values like “Shift” and “Enter” for function
keys. For printing keys, this property holds a less useful string representation of the
Unicode encoding of the character. It is “U+0041” for the 
A
key, for example.
Example 17-8 defines a Keymap class that maps keystroke identifiers such as “PageUp”,
“Alt_Z”, and “ctrl+alt+shift+F5” to JavaScript functions that are invoked in response
to those keystrokes. Pass key bindings to the 
Keymap()
constructor in the form of a
JavaScript object in which property names are keystroke identifiers and property values
are handler functions. Add and remove bindings with the 
bind()
and 
unbind()
methods.
Install a Keymap on an HTML element (often the Document object) with the
install()
method. Installing a keymap on an element registers a 
keydown
event handler
on that element. Each time a key is pressed, the handler checks to see if there is a
function associated with that keystroke. If there is, it invokes it. The keydown handler
uses the DOM Level 3 
key
property, if it is defined. If not, it looks for the Webkit
keyIdentifier
property and uses that. Otherwise, it falls back on the nonstandard
keyCode
property. Example 17-8 begins with a long comment that explains the module
in more detail.
Example 17-8. A Keymap class for keyboard shortcuts
/*
* Keymap.js: bind key events to handler functions.
*
* This module defines a Keymap class. An instance of this class represents a
* mapping of key identifiers (defined below) to handler functions. A Keymap
* can be installed on an HTML element to handle keydown events. When such an
* event occurs, the Keymap uses its mapping to invoke the appropriate handler.
*
* When you create a Keymap, you can pass a JavaScript object that represents 
* the initial set of bindings for the Keymap. The property names of this object
* are key identifers, and the property values are the handler functions.
* After a Keymap has been created, you can add new bindings by passing a key
17.9  Keyboard Events | 485
Client-Side
JavaScript
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Ability to get word count of PDF pages. Change Word hyperlink to PDF hyperlink and bookmark. Free online Word to PDF converter without email.
add a link to a pdf; add page number to pdf hyperlink
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Merge all Excel sheets to one PDF file in VB.NET. Change Excel hyperlink to PDF hyperlink and bookmark. Export PDF from Excel with cell border or no border.
add url to pdf; add hyperlinks pdf file
* identifer and handler function to the bind() method. You can remove a
* binding by passing a key identifier to the unbind() method.
*
* To make use of a Keymap, call its install() method, passing an HTML element,
* such as the document object. install() adds an onkeydown event handler to
* the specified object. When this handler is invoked, it determines the key
* identifier of the pressed key and invokes the handler function, if any,
* bound to that key identifier. A single Keymap may be installed on more than
* one HTML element.
*
* Key Identifiers
*
* A key identifier is a case-insensitive string representation of a key plus
* any modifier keys that are held down at the same time. The key name is
* usually the (unshifted) text on the key. Legal key names include "A", "7",
* "F2", "PageUp", "Left", "Backspace", and "Esc".
*
* See the Keymap.keyCodeToKeyName object in this module for a list of names.
* These are a subset of the names defined by the DOM Level 3 standard and 
* this class will use the key property of the event object when implemented.
*
* A key identifier may also include modifier key prefixes. These prefixes are
* Alt, Ctrl, Meta, and Shift. They are case-insensitive, and must be separated
* from the key name and from each other with spaces or with an underscore,
* hyphen, or +. For example: "SHIFT+A", "Alt_F2", "meta-v", and "ctrl alt left".
* On Macs, Meta is the Command key and Alt is the Option key. Some browsers
* map the Windows key to the Meta modifier.
*
* Handler Functions
*
* Handlers are invoked as methods of the document or document element on which
* the keymap is installed and are passed two arguments:
*   1) the event object for the keydown event
*   2) the key identifier of the key that was pressed
* The handler return value becomes the return value of the keydown handler.
* If a handler function returns false, the keymap will stop bubbling and
* cancel any default action associated with the keydown event.
*
* Limitations
*
* It is not possible to bind a handler function to all keys. The operating
* system traps some key sequences (Alt-F4, for example). And the browser
* itself may trap others (Ctrl-S, for example). This code is browser, OS,
* and locale-dependent. Function keys and modified function keys work well,
* and unmodified alphanumeric keys work well. The combination of Ctrl and Alt
* with alphanumeric characters is less robust.
*
* Most punctuation characters that do not require the Shift key (`=[];',./\ 
* but not hyphen) on standard US keyboard layouts are supported. But they are
* not particularly portable to other keyboard layouts and should be avoided.
*/
// This is the constructor function
function Keymap(bindings) {
this.map = {};    // Define the key identifier->handler map
if (bindings) {   // Copy initial bindings into it
486 | Chapter 17: Handling Events
VB.NET PDF Library SDK to view, edit, convert, process PDF file
Please click to see details. PDF Hyperlink Edit. RasterEdge PDF SDK for .NET package offers robust APIs for editing PDF document
pdf link open in new window; add hyperlink in pdf
C# PDF Library SDK to view, edit, convert, process PDF file for C#
Please click to see details. C#.NET: Edit PDF Hyperlink. RasterEdge PDF SDK for .NET package offers robust APIs for editing PDF document
add hyperlink pdf; accessible links in pdf
for(name in bindings) this.bind(name, bindings[name]);
}
}
// Bind the specified key identifier to the specified handler function
Keymap.prototype.bind = function(key, func) {
this.map[Keymap.normalize(key)] = func;
};
// Delete the binding for the specified key identifier
Keymap.prototype.unbind = function(key) {
delete this.map[Keymap.normalize(key)];
};
// Install this Keymap on the specified HTML element
Keymap.prototype.install = function(element) {
// This is the event-handler function
var keymap = this;
function handler(event) { return keymap.dispatch(event, element); }
// Now install it
if (element.addEventListener)
element.addEventListener("keydown", handler, false);
else if (element.attachEvent) 
element.attachEvent("onkeydown", handler);
};
// This method dispatches key events based on the keymap bindings.
Keymap.prototype.dispatch = function(event, element) {
// We start off with no modifiers and no key name
var modifiers = ""
var keyname = null;
// Build the modifier string in canonical lowercase alphabetical order.
if (event.altKey) modifiers += "alt_";      
if (event.ctrlKey) modifiers += "ctrl_";
if (event.metaKey) modifiers += "meta_";
if (event.shiftKey) modifiers += "shift_";
// The keyname is easy if the DOM Level 3 key property is implemented:
if (event.key) keyname = event.key;
// Use the keyIdentifier on Safari and Chrome for function key names
else if (event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+")
keyname = event.keyIdentifier;
// Otherwise, use the keyCode property and the code-to-name map below
else keyname = Keymap.keyCodeToKeyName[event.keyCode];
// If we couldn't figure out a key name, just return and ignore the event.
if (!keyname) return;
// The canonical key id is modifiers plus lowercase key name
var keyid = modifiers + keyname.toLowerCase();
// Now see if the key identifier is bound to anything
var handler = this.map[keyid];
17.9  Keyboard Events | 487
Client-Side
JavaScript
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Able to get word count in PDF pages. Change Word hyperlink to PDF hyperlink and bookmark. Free online Word to PDF converter without email.
change link in pdf; adding a link to a pdf
.NET PDF SDK - Description of All PDF Processing Control Feastures
Add signature image to PDF file. PDF Hyperlink Edit. Support adding outline; More about PDF Hyperlink Edit ▶. PDF Metadata Edit. Support
clickable links in pdf files; add link to pdf
if (handler) {  // If there is a handler for this key, handle it
// Invoke the handler function
var retval = handler.call(element, event, keyid);
// If the handler returns false, cancel default and prevent bubbling
if (retval === false) {
if (event.stopPropagation) event.stopPropagation();  // DOM model
else event.cancelBubble = true;                      // IE model
if (event.preventDefault) event.preventDefault();    // DOM
else event.returnValue = false;                      // IE
}
// Return whatever the handler returned
return retval;
}
};
// Utility function to convert a key identifier to canonical form.
// On non-Macintosh hardware, we could map "meta" to "ctrl" here, so that
// Meta-C would be "Command-C" on the Mac and "Ctrl-C" everywhere else.
Keymap.normalize = function(keyid) {
keyid = keyid.toLowerCase();           // Everything lowercase
var words = keyid.split(/\s+|[\-+_]/); // Split modifiers from name
var keyname = words.pop();             // keyname is the last word
keyname = Keymap.aliases[keyname] || keyname; // Is it an alias?
words.sort();                          // Sort remaining modifiers
words.push(keyname);                   // Add the normalized name back 
return words.join("_");                // Concatenate them all
};
Keymap.aliases = {        // Map common key aliases to their "official" 
"escape":"esc",       // key names used by DOM Level 3 and by 
"delete":"del",       // the key code to key name map below.
"return":"enter",     // Both keys and values must be lowercase here.
"ctrl":"control",
"space":"spacebar",
"ins":"insert"
};
// The legacy keyCode property of the keydown event object is not standardized
// But the following values seem to work for most browsers and OSes.
Keymap.keyCodeToKeyName = {
// Keys with words or arrows on them
8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt",
19:"Pause", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp",  
34:"PageDown", 35:"End", 36:"Home", 37:"Left", 38:"Up", 39:"Right",
40:"Down", 45:"Insert", 46:"Del",
// Number keys on main keyboard (not keypad)
48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",
// Letter keys. Note that we don't distinguish upper and lower case
65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I",
74:"J", 75:"K", 76:"L", 77:"M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R",
83:"S", 84:"T", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z",
488 | Chapter 17: Handling Events
// Keypad numbers and punctuation keys. (Opera does not support these.)
96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9",
106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal", 111:"Divide",
// Function keys
112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6",
118:"F7", 119:"F8", 120:"F9", 121:"F10", 122:"F11", 123:"F12",
124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17", 129:"F18",
130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24",
// Punctuation keys that don't require holding down Shift
// Hyphen is nonportable: FF returns same code as Subtract
59:";", 61:"=", 186:";", 187:"=", // Firefox and Opera return 59,61 
188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"'"
};
17.9  Keyboard Events | 489
Client-Side
JavaScript
CHAPTER 18
Scripted HTTP
The Hypertext Transfer Protocol (HTTP) specifies how web browsers get documents
from and post form contents to web servers, and how web servers respond to those
requests and posts. Web browsers obviously handle a lot of HTTP. Usually HTTP is
not under the control of scripts and instead occurs when the user clicks on a link,
submits a form, or types a URL.
It is possible for JavaScript code to script HTTP, however. HTTP requests are initiated
when a script sets the 
location
property of a window object or calls the 
submit()
method
of a form object. In both cases, the browser loads a new page. This kind of trivial HTTP
scripting can be useful in a multiframed web page but is not the topic we’ll cover here.
Instead, this chapter explains how scripts can communicate with a web server without
causing the web browser to reload the content of any window or frame.
The term Ajax describes an architecture for web applications that prominently features
scripted HTTP.
1
The key feature of an Ajax application is that it uses scripted HTTP
to initiate data exchange with a web server without causing pages to reload. The ability
to avoid page reloads (which were the norm in the early days of the Web) results in
responsive web applications that feel more like traditional desktop applications. A web
application might use Ajax technologies to log user interaction data to the server or to
improve its start-up time by displaying only a simple page at first and then downloading
additional data and page components on an as-needed basis.
The term Comet refers to a related web application architecture that uses scripted
HTTP.
2
In a sense, Comet is the reverse of Ajax: in Comet, it is the web server that
initiates the communication, asynchronously sending messages to the client. If the web
application needs to respond to these messages sent by the server, it can then use Ajax
1.Ajax is an (uncapitalized) acronym for Asynchronous JavaScript and XML. The term was coined by Jesse
James Garrett and first appeared in his February 2005 essay  “Ajax: A New Approach to Web
Applications”. “Ajax” was a popular buzzword for many years; now it is simply a useful term for an web
application architecture based on scripted HTTP requests.
2.The name Comet was coined by Alex Russell in  “Comet: Low Latency Data for the Browser”. The name
is likely a play on Ajax: both Comet and Ajax are US brands of scouring powder.
491
techniques to send or request data. In Ajax, the client “pulls” data from the server. With
Comet, the server “pushes” data to the client. Other names for Comet include “Server
Push,” “Ajax Push,” and “HTTP Streaming.”
There are a number of ways to implement Ajax and Comet, and these underlying im-
plementations are sometimes known as transports. The 
<img>
element, for example,
has a 
src
property. When a script sets this property to a URL, an HTTP GET request
is initiated to download an image from that URL. A script can therefore pass informa-
tion to a web server by encoding that information into the query-string portion of the
URL of an image and setting the 
src
property of an 
<img>
element. The web server must
actually return some image as the result of this request, but it can be invisible: a trans-
parent 1-pixel-by-1-pixel image, for instance.
3
An 
<img>
element does not make a good Ajax transport, because the data exchange is
one-way: the client can send data to the server, but the server’s response will always be
an image that the client can’t easily extract information from. The 
<iframe>
element is
more versatile, however. To use an 
<iframe>
as an Ajax transport, the script first encodes
information for the web server into a URL and then sets the 
src
property of the
<iframe>
to that URL. The server creates an HTML document containing its response
and sends it back to the web browser, which displays it in the 
<iframe>
. The 
<iframe>
need not be visible to the user; it can be hidden with CSS, for example. A script can
access the server’s response by traversing the document object of the 
<iframe>
. Note,
though, that this traversal is subject to the constraints of the same-origin policy de-
scribed in §13.6.2.
Even the 
<script>
element has a 
src
property that can be set to initiate an HTTP GET
request. Doing HTTP scripting with 
<script>
elements is particularly attractive because
they are not subject to the same-origin policy and can be used for cross-domain com-
munication. Usually, with a 
<script>
-based Ajax transport, the server’s response takes
the form of JSON-encoded (see §6.9) data that is automatically “decoded” when the
script is executed by the JavaScript interpreter. Because of its use of the JSON data
format, this Ajax transport is known as “JSONP.”
Although Ajax techniques can be implemented on top of an 
<iframe>
or 
<script>
transport, there is usually an easier way to do it. For some time, all browsers have
supported an XMLHttpRequest object that defines an API for scripted HTTP. The API
includes the ability to make POST requests, in addition to regular GET requests, and
can return the server’s response as text or as a Document object. Despite its name, the
XMLHttpRequest API is not limited to use with XML documents: it can fetch any kind
of text document. §18.1 covers the XMLHttpRequest API and takes up most of the
chapter. Most of the Ajax examples in this chapter will use the XMLHttpRequest object
as their transport, but we’ll also demonstrate how to use the 
<script>
-based transport
3.Images of this sort are sometimes called web bugs. Privacy concerns arise when web bugs are used to
communicate information to a server other than the one from which the web page was loaded. One
common use of this kind of third-party web bug is for hit counting and website traffic analysis.
492 | Chapter 18: Scripted HTTP
Documents you may be interested
Documents you may be interested