在文本字段中用定義的文本附加輸入

Question

我想做的是在用戶輸入期間在文本字段中附加.com 。 文本字段將為空，並且在輸入域名時將顯示.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

我認為這是一個很好的問題。 對於一個時尚的解決方案，您可以使用下面的代碼

在html文本框中設置鍵盤插入符的位置

在輸入字段中手動設置插入標記的位置：

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演示

另外，要啟用在字符串中間的編輯，您必須獲得插入符號的位置。 這里有一個stackoverflow問題

獲取文本輸入字段中的光標位置（以字符為單位）

有很好的例子。 我修改了答案之一，如下所示：

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);
});

使用該實現更新了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 ，有些瀏覽器使用e.Which 。

JsFiddle演示

更新： 鏈接到關鍵代碼的完整列表。