jQuery Mobile有数字键盘吗? [英] Is there a numeric keypad for jQuery Mobile?
问题描述
我有一个iPad外围设备,需要将焦点放在数字字段上,以允许用户输入数量.
I have a peripheral for the iPad that needs to set the focus on a numeric field to allow the user to enter a qty.
我的问题是:当我的JavaScript将焦点放在该字段上时,键盘不会向上滑动.
My problem is: When my JavaScript sets the focus on the field, the keyboard doesn't slide up.
一种可能的解决方案是只在屏幕上抛出10个按钮,但是在我这样做之前,我想我会问社区是否已经在jQuery mobile中完成了样式精美的键盘.
One possible solution would be to just throw 10 buttons up on the screen, but before I do that, I thought I would ask the community if a nicely styled keypad has already been done in jQuery mobile.
推荐答案
更新:带有示例的JSFiddle. (我不是作者)
Updated: JSFiddle with an example. (I am not the author)
这是一个不错的自定义jQuery小键盘,可以检出:简单的jQuery小键盘
Here is a decent custom jQuery keypad to check out: Simple jQuery Keypad
HTML:
<input style="background: white; color: black;" type="text" readonly="readonly" id="myInput"/>
<table class="ui-bar-a" id="n_keypad" style="display: none; -khtml-user-select: none;">
<tr>
<td><a data-role="button" data-theme="b" class="numero">7</a></td>
<td><a data-role="button" data-theme="b" class="numero">8</a></td>
<td><a data-role="button" data-theme="b" class="numero">9</a></td>
<td><a data-role="button" data-theme="e" class="del">Del</a></td>
</tr>
<tr>
<td><a data-role="button" data-theme="b" class="numero">4</a></td>
<td><a data-role="button" data-theme="b" class="numero">5</a></td>
<td><a data-role="button" data-theme="b" class="numero">6</a></td>
<td><a data-role="button" data-theme="e" class="clear">Clear</a></td>
</tr>
<tr>
<td><a data-role="button" data-theme="b" class="numero">1</a></td>
<td><a data-role="button" data-theme="b" class="numero">2</a></td>
<td><a data-role="button" data-theme="b" class="numero">3</a></td>
<td><a data-role="button" data-theme="e"> </a></td>
</tr>
<tr>
<td><a data-role="button" data-theme="e" class="neg">-</a></td>
<td><a data-role="button" data-theme="b" class="zero">0</a></td>
<td><a data-role="button" data-theme="e" class="pos">+</a></td>
<td><a data-role="button" data-theme="e" class="done">Done</a></td>
</tr>
</table>
JS:
$(document).ready(function(){
$('#myInput').click(function(){
$('#n_keypad').fadeToggle('fast');
});
$('.done').click(function(){
$('#n_keypad').hide('fast');
});
$('.numero').click(function(){
if (!isNaN($('#myInput').val())) {
if (parseInt($('#myInput').val()) == 0) {
$('#myInput').val($(this).text());
} else {
$('#myInput').val($('#myInput').val() + $(this).text());
}
}
});
$('.neg').click(function(){
if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
if (parseInt($('#myInput').val()) > 0) {
$('#myInput').val(parseInt($('#myInput').val()) - 1);
}
}
});
$('.pos').click(function(){
if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
$('#myInput').val(parseInt($('#myInput').val()) + 1);
}
});
$('.del').click(function(){
$('#myInput').val($('#myInput').val().substring(0,$('#myInput').val().length - 1));
});
$('.clear').click(function(){
$('#myInput').val('');
});
$('.zero').click(function(){
if (!isNaN($('#myInput').val())) {
if (parseInt($('#myInput').val()) != 0) {
$('#myInput').val($('#myInput').val() + $(this).text());
}
}
});
});
这篇关于jQuery Mobile有数字键盘吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!