简化 keyup 输入的一些 jQuery 代码

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绑定一次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']") 将 return 所有 id 以 "input" 开头的元素。

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 代码

Simplifying some jQuery code of keyup inputs

javascript

jquery

css

input

keyup

我正在制作的东西

问题

更多