Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2018, 10:32
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Ввод в 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")) но после нажатия на кнопку выделение слетает.
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2018, 11:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2018, 12:01
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2018, 12:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068



return +val + n;
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2018, 13:13
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

j0hnik,
Dilettante_Pro,
рони,
Спасибо вам
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ввод в input с кнопки Artur_Hopf Общие вопросы Javascript 14 05.04.2018 15:37
Значения элементов формы типа Input по нажатию кнопки сохранить в JSON drno-reg Элементы интерфейса 1 22.07.2016 15:15
Ввод данных в input text Andrey777 Элементы интерфейса 7 06.04.2015 18:15
Присвоение значений элементу input при нажатии кнопки. Минин Игорь Элементы интерфейса 8 26.11.2012 06:01
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27