Форум

Joliat · #1 (**permalink**) 14.12.2016, 18:27

Добрый день. Мучаюсь довольно долго, прийти к правильному решению не могу.
Есть input:

<input id="all_block" type="text" value="is105x1,is132x5,is123x1">

Нужно найти по id инпута кусок строки, и заменить число на соответствующий вводимый "множитель".
К примеру есть часть html:

<input id="is105" type="text" value="1" onkeyup="test(this.id);">
<input id="is132" type="text" value="1" onkeyup="test(this.id);">
<input id="is123" type="text" value="1"  onkeyup="test(this.id);">

Пользователь меняет значение инпута id="is132" на 5 и value инпута id="all_block" должна иметь вид: "is105x1,is132x5,is123x1"

В голове уже полная белеберда, регулярку составить не получается. Кто знает как реализовать, прошу помощи. Спасибо

Joliat · #2 (**permalink**) 14.12.2016, 18:59

Пробую так:

function test(id) {	
	var mn = document.getElementById(id).value;	
	var all_block = document.getElementById('all_block').value;
	alert(all_block.replace(/([\s\S]*)+'id'+x([\s\S]*)\,([\s\S]*)/gi, '$1x'+mn+',$3'));	
}

При изменении любого инпута (is105, is132, is123), "думает" 1-2 секунды и выдает значение инпута id="all_block" без изменений.

рони · #3 (**permalink**) 14.12.2016, 19:35

Joliat,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var all_block = document.querySelector("#all_block"),
        inp = document.querySelectorAll("#is105, #is132, #is123"),
    f = function() {
        all_block.value = [].map.call(inp, function(el) {
            //el.value = +el.value || 1;
            return el.id + "x" + el.value
        })
    };
    [].forEach.call(inp, function(item) {
        item.addEventListener("input", f)
    })
});
  </script>
</head>

<body>
<input id="all_block" type="text" value="is105x1,is132x5,is123x1" size="45">
<input id="is105" type="text" value="1" >
<input id="is132" type="text" value="1" >
<input id="is123" type="text" value="1" >


</body>
</html>

Malleys · #4 (**permalink**) 14.12.2016, 19:36

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content=" IE=edge, chrome=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
        <meta name="keywords" content="">
        <meta name="description" content="">
    </head>
    <body>
        <input id="all_blocks" type="text" value="is105x1,is132x5,is123x1">
        <input id="is105" type="text" value="1">
        <input id="is132" type="text" value="1">
        <input id="is123" type="text" value="1">

        <script>

(function() {
    var all_blocks = document.getElementById("all_blocks");

    document.addEventListener("input", function(event) {
        var input = event.target;
        all_blocks.value = all_blocks.value.replace(new RegExp("(^|,)(" + input.id + ")x(.*?)(,|$)", "gi"), '$1$2x' + input.value + '$4');
    });
})();


        </script>
    </body>
</html>

Joliat · #5 (**permalink**) 14.12.2016, 20:00

рони, Malleys, спасибо большое. Остановился на последнем варианте, он для меня более понятный.

Форум

Справочник

Discord чат

Курсы javascript