Question

好的，所以我有这个任务，我不知道如何实现。我有一个文本字段，只允许用户输入数值....我在按键验证，以确保只允许数字

效果很好

我的问题是客户想要在数字后面写文字说“Miles”所以如果用户输入100，他们会看到“100英里”

我猜可用性。有没有人知道一个好的技术或jquery插件来做到这一点

Answer 1

除了javascript解决方案之外，您可能还需要查看pattern的HTML 5 <input>属性。例如，在现代浏览器中，您可以执行以下操作：

<input name="miles" pattern="^\d+\s?[Mm]iles$" required>

这根本不需要javascript :)这是relevant spec。

Answer 2

这个怎么样：

$('input').keypress(function(e) {
    if (e.which < 48 || e.which > 57) {
        // not a number
        return false;
    }
    // gets current entered numer
    var number = this.value.split(' ')[0];
    // adds new number
    number = '' + number + String.fromCharCode(e.which);
    this.value = number + ' miles';
    return false;
})

Answer 3

这会更容易，我认为在文本框之外的某种标记中这样做更清楚。直接在下面有一个跨度，然后在你的按键上更新它。

$('#textBox').keydown(function(){
    // Validation code
    $('#someSpan').html($(this).val() + " Miles");
});

Answer 4

我的问题是客户想在数字后面写文字说“ 英里“所以，如果用户输入100，他们会看到”100英里“

然后您可以在onfocus的{{1}}和onblur事件中处理此事件。

试试这个

input type="text"

和脚本

<input type="text" min="0" max="1000" step="1" id="distance" placeholder="Enter the value in miles"/>

在这里演示：http://jsfiddle.net/naveen/EQEMr/

Answer 5

这个http://jsfiddle.net/TmxSN/1/

怎么样？

$(function(){

    var timerOutId;
    $('#inp').keypress(function(e) {
       var key = e.which;
        clearTimeout(timerOutId);
        try{
        if(this.value){
           this.value = $.trim(this.value.match(/\d+/g)[0]);
        }
        }catch(e){}    
        if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
           return false;
        }
    }).keyup(function(e) {
        var textBox = this;
        if(this.value){
          timerOutId = setTimeout(function(){
               textBox.value = $.trim(textBox.value.match(/\d+/g)[0]) + " Miles";
          }, 2000);
        }
    })

});

Answer 6

告诉您的客户，任何有足够智慧使用网络的人都可以理解：

<label for="distance">Distance in miles:
 <input type="text" name="distance" id="distance"></label>

并且做其他事情是：

让用户感到困惑
有问题，因为javascript可能启用/可能没有启用/可用
对业务零实际使用，因为必须在服务器上验证值
该值需要在服务器上进行其他处理才能删除附加的字符

将文本添加到唯一的数字文本字段以实现可用性？

6 个答案: