在文本字段中将输入与定义的文本一起追加

Append input with defined text in textfield

本文关键字：文本 定义 追加 一起 输入 字段      更新时间：2023-09-26

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

.HTML

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

爪哇语

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

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

提前谢谢。

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

在 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 Demo

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

获取文本输入字段中的光标位置（以字符为单位）

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

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

用该实现更新了小提琴。

也许这会对你有所帮助。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/

但仍然看起来很敬畏，没有移动插入符号

你可以试试这个

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

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

相关文章：