Name your fiddle
Description
HTML
<textarea id='myText'></textarea>
JavaScript
$(function() {
function insertTextAt(el, text, pos) {
if (typeof pos != 'undefined') {
var val = el.value;
el.value = val.slice(0, pos) + text + val.slice(pos);
el.selectionStart = el.selectionEnd = pos + text.length;
} else {
el.value += text;
el.selectionStart = el.selectionEnd = el.value.length;
}
}
function instrumentIntelli($textarea) {
// Create closure variable for the textarea cursor position.
var pos;
// Create the dialog element and instrument it as a dialog.
var $dialog = $('<div></div>').dialog({
autoOpen: false,
title: 'Properties and Methods',
width: 250,
maxHeight: 100,
position: {
my: 'left top',
at: 'right top',
of: $textarea[0]
}
}).css({
'font-size': '18px',
'font-family': 'Times New Roman'
});
$dialog.dialog('widget').keypress(function(event) {
var key = String.fromCharCode(event.which);
if (key != 'k') {
// In some browsers this moves the focus to the textarea.
insertTextAt($textarea[0], key, pos);
// Update the cursor position variable.
pos = $textarea[0].selectionEnd;
// Move the focus back to the widget.
$dialog.dialog('widget').focus();
} else {
$dialog.dialog('close');
// Since the dialog will remain closed, we want to move the
// focus to the textarea, but we want to delay this until
// after the keyup event is finished or else the textarea
// will get a keypress event for the key.
setTimeout(function() {
$textarea.focus();
...