Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ввод в input с кнопки (https://javascript.ru/forum/misc/74608-vvod-v-input-s-knopki.html)

Artur_Hopf 24.07.2018 10:32

Ввод в input с кнопки
 
Добрый день, возник вопрос, как правильно ввести данные с кнопок в два поля ввода input?

Создал такую вот форму:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="div">
    <form class="was-validated">
    <div class="form-group">
    <label for="inputAddress">Начальный параметр:</label>
    <input type="text" class="form-control" id="div_adjust_name_3_1" placeholder="Было" autocomplete="off" required>
    </div>
    <div class="form-group">
    <label for="inputAddress2">Измененный параметр:</label>
    <input type="text" class="form-control" id="div_adjust_name_4_1" placeholder="Стало" autocomplete="off" required>
    </div>
    </form>
    <div class="form-group col-md-4">
    <button class="btn btn-info" onclick="numFix_ts(1)">1</button>
    <button class="btn btn-info" onclick="numFix_ts(2)">2</button>
    <button class="btn btn-info" onclick="numFix_ts(3)">3</button>
    </div>
    <div class="form-group col-md-4">
    <button class="btn btn-info" onclick="numFix_ts(4)">4</button>
    <button class="btn btn-info" onclick="numFix_ts(5)">5</button>
    <button class="btn btn-info" onclick="numFix_ts(6)">6</button>
    </div>
</div>
<script type="text/javascript">
function numFix_ts(n){
    //if($("#div_adjust_name_3_1").is(":checked")){
    $("#div_adjust_name_3_1").val(function(i, val) {
        return val + n;
    });
   // };
        
}
</script>


Сам вопрос, как вводить в поле input на которое было нажато мышкой?
Я думал напишу if($("#div_adjust_name_3_1").is(":checked")) но после нажатия на кнопку выделение слетает.:-?

j0hnik 24.07.2018 11:58

<input type="text">
<input type="text">
<button>1</button>
<button>2</button>
<script>
	var a;
	var inp = document.querySelectorAll('input');
	inp.forEach((el,i)=>el.onfocus = e => {
		if(el == e.target) a = i;
	});
	document.querySelectorAll('button').forEach(el=>el.onclick = e => inp[a].value += el.textContent);
</script>

Dilettante_Pro 24.07.2018 12:01

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="div">
    <form class="was-validated">
    <div class="form-group">
    <label for="inputAddress">Начальный параметр:</label>
    <input type="text" class="form-control" id="div_adjust_name_3_1" placeholder="Было" autocomplete="off" required>
    </div>
    <div class="form-group">
    <label for="inputAddress2">Измененный параметр:</label>
    <input type="text" class="form-control" id="div_adjust_name_4_1" placeholder="Стало" autocomplete="off" required>
    </div>
    </form>
    <div class="form-group col-md-4">
    <button class="btn btn-info" onclick="numFix_ts(1)">1</button>
    <button class="btn btn-info" onclick="numFix_ts(2)">2</button>
    <button class="btn btn-info" onclick="numFix_ts(3)">3</button>
    </div>
    <div class="form-group col-md-4">
    <button class="btn btn-info" onclick="numFix_ts(4)">4</button>
    <button class="btn btn-info" onclick="numFix_ts(5)">5</button>
    <button class="btn btn-info" onclick="numFix_ts(6)">6</button>
    </div>
</div>
<script type="text/javascript">
var selInput = $("#div_adjust_name_3_1");

$('input.form-control').on('click', function () { selInput = $(this);});

function numFix_ts(n){
    
    selInput.val(function(i, val) {
        return val + n;
    });       
}
</script>

рони 24.07.2018 12:38

:-?

return +val + n;

Artur_Hopf 24.07.2018 13:13

j0hnik,
Dilettante_Pro,
рони,
Спасибо вам :thanks:


Часовой пояс GMT +3, время: 21:57.