基于jquery的多功能软键盘插件

支持查询功能的键盘和简单得软键盘，键盘样式完全在独立的css文件中定义，可以自行美化。

（支持从查询的软键盘）

（简单的软件盘）

插件的默认参数


代码如下:

jquery.fn.softkeyboard.defaults = {
names: {
_delbtn: "skbdel",
_clearbtn: "skbclear",
_querybtn: "skbquery",
_closebtn: "skbclose",
_letterbtn: "skbbtn",
_maindiv: "skbsoftkeyboard",
_leftdiv: "skbleft",
_rightdiv: "skbright",
_keyboarddiv: "skbkeyboard",
_operationdiv: "skboperation",
_codetxt: "skbcode",
_resultsselect: "skbresults",
_postparamcode: "sfbcode",
_clearbtnviewname: "clear",
_delbtnviewname: "delete",
_querybtnviewname: "query",
_closebtnviewname: "close"
}, //插件的相关元素命名
listmultiple: true, //select是否展开
simplekeyboard: true, //是否显示大写字母
onlykeyboard: false, //是否带查询功能
maxlength: null, //可输入的最大长度
requestdataurl: null, //查询数据的post地址
oncompleted: function (data) { }, //完成时出发此时间
onkeydown: function (data) { } //按键时出发此事件
};

插件的使用方法
使用方法


代码如下:

<link href="softkeyboard.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="jquery.softkeyboard.js" type="text/javascript"></script>

在页面中加入一个文本框使用方法2
<input type="text" class="querytxt" />
为class为querytxt的文本框使用插件


代码如下:

<script type="text/javascript">
$(".querytxt").softkeyboard()
</script>

更改相关参数


代码如下:

$(".querytxt").softkeyboard({
simplekeyboard: true,
listmultiple: true,
maxlength: 10,
onkeydown: function (d) { alert(d) },
requestdataurl: "GetData.ashx",
onlykeyboard: true
})

其中GetData.ashx返回的json数据格式类似如下


代码如下:

[{code:"DL",name:"大连"},{code:"DT",name:"大同"},{code:"DL",name:"大理"}]

赞 (0)

相关推荐

  • Android软键盘弹出时的界面控制方法

    本文实例讲述了Android软键盘弹出时的界面控制方法.分享给大家供大家参考,具体如下: 有时候androidactivity弹出软键盘后布局改变 下面有三种模式可以改变软键盘弹出以后的显示形式 模式一:压缩模式软键盘弹出以后,会压缩原先的大小 我们可以在AndroidManifet.xml中对Activity进行设置.如: android:windowSoftInputMode="stateUnchanged|adjustResize" 模式二:平移模式 软键盘弹出以后,不会压缩原先

  • 解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法

    1.//隐藏软键盘    ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(WidgetSearchActivity.this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); 2.//显示软键盘,控件ID可以是EditText,TextView    ((InputMethodMa

  • JS实现自定义简单网页软键盘效果代码

    JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果.分享给大家供大家参考,具体如下: 这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学习,希望对您有用处. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • Android中监听软键盘显示状态实现代码

    /**监听软键盘状态 * @param activity * @param listener */ public static void addOnSoftKeyBoardVisibleListener(Activity activity, final OnSoftKeyBoardVisibleListener listener) { final View decorView = activity.getWindow().getDecorView(); decorView.getViewTree

  • 手机软键盘弹出时影响布局的解决方法

    移动端软键盘弹出时影响布局该如何解决 1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时,布局没有大影响. 当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题. 原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').height($('bo

  • jquery比较简洁的软键盘特效实现方法

    jquery比较简洁的软键盘特效实现方法

    本文实例讲述了jquery比较简洁的软键盘特效实现方法.分享给大家供大家参考.具体实现方法如下: 运行效果图如下: 1. html主要部分如下: 复制代码 代码如下: <div id="container">  <textarea id="write" rows="6" cols="60"></textarea>  <ul id="keyboard">   &

  • Android屏蔽EditText软键盘的方法

    本文实例讲述了Android屏蔽EditText软键盘的方法.分享给大家供大家参考.具体如下: java代码如下: InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(myEdit.getWindowToken(), 0); //myEdit是你的EditText对象 可以通过下面方法恢复显示: boolea

  • Js之软键盘实现(js源码)

    Js之软键盘实现(js源码)

    鉴于安全性的考虑,不少网站在登录输入密码时都采用了软键盘,避免一些键盘记录工具和木马对击键的捕捉.项目中也有这个需求,就分享给大家了,贴个效果图上来..有兴趣的朋友可以收藏....如果觉得功能有点庞大,只需要数字小键盘的朋友,可参考代码精简.下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar小键盘:http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar小键盘: 效果还原:Default

  • Android 显示和隐藏软键盘的方法(手动)

    Android 显示和隐藏软键盘的方法(手动)

    在Android开发中,经常会有一个需求,做完某项操作后,隐藏键盘,也即让Android中的软键盘不显示.今天,和大家分享如何利用代码来实现对Android的软件盘的隐藏.显示的操作. 1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.toggleSoftInput(0, InputMeth

  • Android WebView无法弹出软键盘的原因及解决办法

    requestFoucs();无效. requestFoucsFromTouch();无效. webview.setTouchListener:无效. 问题所在: 继承WebView时,注意构造方法: public CommonWebView(Context context) { super(context); init(); } public CommonWebView(Context context, AttributeSet attrs) { super(context, attrs);

随机推荐