Question

我在做什么

我正在制作一个网页，即自动生成论坛代码当我将内容输入到输入中时。每个角色都有不同的颜色，句子看起来像一个渐变。

当我在这些输入中输入a-p-p-l-e时，结果如下：

[color=3173d8]a[/color][color=416cd9]p[/color][color=5e5bdb]p[/color][color=8248dd]l[/color][color=a335df]e[/color]

问题

当创建越来越多的输入和跨度时，js代码将变得如此庞大。但我不知道如何简化它们。我试图使用像$(this).attr('target')这样的东西，它只是不起作用。如果我想添加更多输入，比如说30，那么任何人都可以帮助我缩短它。

更多

如果我希望焦点移动到下一个输入，如果输入的字符已经输入了怎么办？然后我可以使用'tab'键入单词。

Answer 1

您可以像这样简化代码。

使用id以selector开头的方式绑定keyup事件。

var colors = ["3173d8", "416cd9", "5e5bdb", "8248dd", "a335df"]

$("[id^=input]").each(function (i) {
    $(this).css('background', '#' + colors[i]);
});

$("[id^=input]").keyup(function () {
    var index = $("[id^=input]").index(this);
    $("span[id^=span]").eq(index).html('[color=' + colors[index] + ']' + $(this).val() + '[/color]');
});

请注意，$("[id^='input']")将返回ID以＆＃34开头的所有元素;输入＆＃34;。

Demo Fiddle

编辑以更改焦点

var colors = ["3173d8", "416cd9", "5e5bdb", "8248dd", "a335df"]
$("[id^=input]").each(function(i) {
    $(this).css('background', '#' + colors[i]);
});

$("[id^=input]").keyup(function() {
    if ($(this).val().trim().length) {
        $(this).next().focus();
    }
    var index = $(this).index();
    $("span[id^=span]").eq(index).html('[color=' + colors[index] + ']' + $(this).val() + '[/color]');

});

Edited Fiddle

Answer 2

自动输入和完整的js解决方案。而且添加新颜色很容易。

// Define color separately
var colors = [
  "3173d8", "416cd9", "5e5bdb", "8248dd", "a335df"
];

(function() {
  $("body")
    .append('<div id="parent"></div>')
    .append('<code id="output"></code>');

  var f = function() {
    $("#output").html("");

    for (var i = 0, val = ""; i < colors.length; i++) {
      val = $("#parent input[data-num=" + i + "]").val();
      $("#output").append('[color=' + colors[i] + ']' + val + '[/color]');
      //or $("#output").append('<span id="span'+i+'">'+c+'</span>');
    }
  };

  for (var i = 0; i < colors.length; i++) {
    $('<input size="4" maxlength="1" />')
      .attr("data-num", i)
      .css('background', '#' + colors[i])
      .keyup(f)
      .appendTo("#parent");
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

简化keyup输入的一些jQuery代码

我在做什么

问题

更多

2 个答案: