Question

我要做的是在用户输入期间在文本字段中附加.com。 Textfield将为空，并且在输入域名时将显示.com。这是我的工作代码：

HTML

Enter domain name: <input type="text" id="domain">

的Javascript

$(document).ready(function(){
  $("input").keypress(function(){
    $("#domain").val(this.value + ".com");
  });
});

不工作演示： http://jsfiddle.net/UUzux/25/

提前致谢。

Answer 1

我认为这是一个很好的问题。对于时尚的解决方案，您可以使用以下代码来自

Set keyboard caret position in html textbox

在输入字段中手动设置插入位置：

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        } else {
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            } else { // fail
                el.focus();
                return false;
            }
        }
    }
}

然后你将按如下方式实现它：

$("input").keyup(function () {
    var val = $("#domain").val();

    val = val.replace(/\..*/g, ''); // replace this with whatever regex you need to deny whatever input you want.
    $("#domain").val(val + ".com");

    var caretPos = val.length;
    var elemId = "domain";

    setCaretPosition(elemId, caretPos);
});

在字符串中的任何.字符之后将取任何内容，每次用'.com'替换它（您可以替换此正则表达式以处理您需要的任何内容），然后将光标位置设置为右在'.com'之前

JSFiddle Demo

此外，要在字符串中间启用编辑，您必须获得插入位置。这里有一个stackoverflow问题

Get cursor position (in characters) within a text Input field

有很好的例子。我修改了其中一个答案如下：

getCaretPosition = function (elemId) {
    var input = $('#' + elemId);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input[0]) {
        // Standard-compliant browsers
        return input[0].selectionStart;
    } else if (document.selection) {
        // IE
        input.focus();
        var sel = document.selection.createRange();
        var selLen = document.selection.createRange().text.length;
        sel.moveStart('character', -input.value.length);
        return sel.text.length - selLen;
    }
}

然后你的jQuery看起来像这样：

$("input").keyup(function () {
    var val = $("#domain").val();
    var elemId = "domain";

    var caretPos = getCaretPosition(elemId);

    val = val.replace(/\..*/g, '');
    $("#domain").val(val + (val ? ".com" : ""));

    setCaretPosition(elemId, caretPos);
});

Updated Fiddle有了这个实现。

Answer 2

也许这会对你有所帮助。 http://jsfiddle.net/naeemshaikh27/UUzux/35/

$(document).ready(function(){
    var prevText;
  $("input").keyup(function(e){
      var str=$("input").val().replace(".com", "");

 str=str+'.com'

      $("#domain").val( str );

  });
});

这里有更新的：http://jsfiddle.net/naeemshaikh27/UUzux/39/

但是，如果没有转移，仍然看起来很可怜

Answer 3

你可以试试这个

$(document).ready(function () {
    $("input").keyup(function (e) {
        var kcode;
        if (!e){
            var e = window.event;
        }

        if (e.keyCode){
            kcode = e.keyCode;
        }
        else if (e.which){ 
            kcode = e.which;
        }

        if (kcode == 8 || kcode == 46){
            return false;
        }

        this.value = this.value.replace('.com', '');

        $("#domain").val(this.value + ".com");

        var curpos = this.createTextRange();
        curpos.collapse(true);
        curpos.moveEnd('character', this.value.length - 4);
        curpos.select();
    });
});

我不得不在这篇文章中借用Joel中的一些代码来禁用退格键和删除键。正如他在帖子中所述，使用e.keyCode时要小心，因为并非所有浏览器都使用它，有些人使用e.Which。

JsFiddle Demo

更新：link到完整的密钥代码列表。

在textfield中附加带有已定义文本的输入

3 个答案: