jQuery自适应屏幕大小软键盘。

最新推荐文章于 2024-08-14 19:32:44 发布

半步天涯i

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量562

点赞数

分类专栏： jQuery 文章标签： jQuery 自定义软键盘自适应屏幕大小

本文链接：https://blog.csdn.net/qq_27572071/article/details/83304163

版权

本文介绍了一种使用jQuery创建自适应屏幕大小的web软键盘的方法，包括控制大小写、切换输入框及根据光标位置判断输入内容。通过HTML布局、JS代码实现输入限制，并附带CSS样式。作者分享了初尝试心得，欢迎大家交流讨论。

摘要由CSDN通过智能技术生成

由于最近要写一个web版的软键盘，需要能控制大小写，能切换光标所在输入框，能通过光标所在位置判断键盘可以输入的内容。效果图如下所示：

话不多说，直接上代码。

HTML布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1" />

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>软键盘</title>

	<!--屏幕分辨率不同，引入不同布局 -->
	<link rel="stylesheet" type="text/css" href="css/tabletStyle.css" media="screen and (min-width: 750px) and (max-width: 1024px)">
	<link rel="stylesheet" type="text/css" href="css/smallStyle.css" media="screen and (max-width: 750px)">
	<link rel="stylesheet" type="text/css" href="css/maxStyle.css" media="screen and (min-width: 1024px)">

</head>

<body>


<div id="container">

    <!--N:Number  L:letter  A:all   S:Special characters -->
	<input class="keyboardInput" format="LNNNAAAAAAAA" type="text" id="userName">
	<input class="keyboardInput" format="AAAAAAAAAAAA" type="text" id="password">
	<input class="keyboardInput" format="LNNN" type="text" id="block" maxlength="4">
	<input class="keyboardInput" format="NNN" type="text" id="slot" maxlength="3">

	<ul id="keyboard">

		<li class="disable">`</li>

		<li class="number All">1</li>

		<li class="number All">2</li>

		<li class="number All">3</li>

		<li class="number All">4</li>

		<li class="number All">5</li>

		<li class="number All">6</li>

		<li class="number All">7</li>

		<li class="