1.I write some code to implement VirtualSoftKeyBoard,have to question,please somebody can help me:
this is source code,you can copy it into you demo project to run it.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.softkeyboard
{
100%;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999),color-stop(0.02, #666), color-stop(1, #000) );
padding: 0;
position: fixed;
z-index: 998;
}
.softkeyboard li
{
80px;
height: 80px;
text-align: center;
list-style: none;
float: left;
padding-left: 0px;
margin: 1px;
border: 1px solid #fff;
line-height: 80px;
}
.softkeyboard li a
{
display: block;
text-decoration: none;
font-size: 32px;
color: #eee;
line-height: 50px;
text-shadow: 0 -1px 0 #000;
line-height: 80px;
font-weight: bold;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":input[type=text]").bind("click", function () {
var keyboard = new SoftKeyBoard($(this)).keyboard;
$(document.body).append(keyboard);
});
});
function SoftKeyBoard($inputSrc) {
var $keyboardDIV = $("<div></div>");
var keys = [];
this.keyboard = function () {
$keyboardDIV.addClass('softkeyboard');
var $keyUL = $("<ul></ul>");
for (var i = 0; i < 10; i++) {
var $numberKey = $("<a href='#'></a>");
var $keyLI = $("<li></li>");
$numberKey.html(i);
$keyLI.append($numberKey);
$keyUL.append($keyLI);
keys.push($numberKey);
}
var dotLI, delLI, okLI;
dotLI = $("<li></li>");
delLI = $("<li></li>");
okLI = $("<li></li>");
var dotKey, delKey, okKey;
dotKey = $("<a href='#'></a>");
delKey = $("<a href='#'></a>");
okKey = $("<a href='#'></a>");
dotKey.html("\.");
delKey.html("←");
okKey.html("↵");
keys.push(dotKey);
dotLI.append(dotKey);
delLI.append(delKey);
okLI.append(okKey);
$keyUL.append(dotLI).append(delLI).append(okLI);
$keyboardDIV.append($keyUL);
var offset = $inputSrc.offset();
var h = $inputSrc.height();
var top = (offset.top + h) + "px";
var left = offset.left + "px";
$keyboardDIV.css({ "top": top, "left": left });
for (var j = 0; j < keys.length; j++) {
keys[j].bind("click", { value: keys[j].html(), src: $inputSrc }, onKeyClickHandler);
}
delKey.bind("click", function () { });
okKey.bind("click", function () {
$keyboardDIV.remove();
});
// $(document.body).append($keyboardDIV);
return $keyboardDIV;
}
}
function onKeyClickHandler(event) {
// alert("click is " + event.data.value);
//how to insert value from focus start?
var val = event.data.src.val();
val += event.data.value;
event.data.src.val(val);
event.data.src.focus();
}
</script>
</head>
<body>
<input type="text" id="position" /><br />
<input type="text" id="Text1" /><br />
<input type="text" id="Text2" /><br />
<input type="text" id="Text3" /><br />
<input type="button" value="test" /><br />
</body>
</html>
2.question 1. input click event,How to create an object only?
3.question 2.How to insert values from a current cursor？