时间戳

首页 > 解决方案 > 如何使用相同的按钮设置多个输入字段的值

javascript - 如何使用相同的按钮设置多个输入字段的值

问题描述

我只想在单击时才设置输入字段值并要在同一按钮中从两个不同的输入字段中设置值时，当一个输入字段被选择时，仅在其他选择/单击值设置其时，仅在此字段中设置值。

尝试不同的方法，但没有成功。我希望我能在这个问题上得到帮助。

谢谢

var phoneScreen = $("#phone"); var phoneNumber = phoneScreen.val();
var delBtn = $("#del"); var clrBtn = $("#clr");
var numBtn = $(".number");

numBtn.click(function() {
    var number = $(this).val();
  updatePhoneNumber(number);
  printPhoneNumber();
});
delBtn.click(function() {
    deleteNumber();
  printPhoneNumber();
});
clrBtn.click(function() {
    clearNumber();
  printPhoneNumber();
});

function updatePhoneNumber(newNumber) {
    phoneNumber = phoneNumber + newNumber;
}
function deleteNumber() {
    phoneNumber = phoneNumber.slice(0,-1);
}
function clearNumber() {
    phoneNumber = "";
}
function printPhoneNumber() {
    phoneScreen.val(phoneNumber);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


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

  <style>
  </style>
</head>
<body>
<input type="number" id="phone" placeholder="(123) 45-7" min="0" step="1"/>

<input type="number" id="phone2" placeholder="(123) 45-7" min="0" step="1"/>

<form action="#" method="post" id="form">
<button type="button" class="rightside__pad-btn number" value="1">1</button>
<button type="button" type="button" class="rightside__pad-btn number" value="2">2</button>
<button type="button" type="button" class="rightside__pad-btn number" value="3">3</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="4">4</button>
<button type="button" type="button" class="rightside__pad-btn number" value="5">5</button>
<button type="button" type="button" class="rightside__pad-btn number" value="6">6</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="7">7</button>
<button type="button" type="button" class="rightside__pad-btn number" value="8">8</button>
<button type="button" type="button" class="rightside__pad-btn number" value="9">9</button>
<br />
<button type="button" id="del" class="rightside__pad-btn del">
</button>
<button type="button" class="rightside__pad-btn number" value="0">0</button>
<button type="button" id="dial" class="rightside__pad-btn" value="">
</button>
    
    
    </form>

  
</body>
</html>

标签： javascripthtmlcss

解决方案

我只是添加了一些更改

  1. var hasFocus = $('#phone');设置#phone为默认焦点元素。

  2. 将 更新hasFocus为选定的输入元素。

   $('input[type=number]').on('click', function(){
      hasFocus = $(this);
    });

现在添加了为焦点元素设置值的功能hasFocus.val(hasFocus.val() +number);

请更新

var phoneScreen = $("#phone"); 
var phoneNumber = phoneScreen.val();
var delBtn = $("#del"); var clrBtn = $("#clr");
var numBtn = $(".number");
var hasFocus = $('#phone');
$('input[type=number]').on('click', function(){
  hasFocus = $(this);
})
numBtn.click(function() {
    var number = $(this).val();  
    hasFocus.val(hasFocus.val() +number);
  //updatePhoneNumber(number);
  //printPhoneNumber(number);
});
delBtn.click(function() {
    deleteNumber();
  printPhoneNumber();
});
clrBtn.click(function() {
    clearNumber();
  printPhoneNumber();
});

function updatePhoneNumber(newNumber) {
    phoneNumber = phoneNumber + newNumber;
}
function deleteNumber() {
    phoneNumber = phoneNumber.slice(0,-1);
}
function clearNumber() {
    phoneNumber = "";
}
function printPhoneNumber() {
    phoneScreen.val(phoneNumber);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


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

  <style>
  </style>
</head>
<body>
<input type="number" id="phone" placeholder="(123) 45-7" min="0" step="1"/>

<input type="number" id="phone2" placeholder="(123) 45-7" min="0" step="1"/>

<form action="#" method="post" id="form">
<button type="button" class="rightside__pad-btn number" value="1">1</button>
<button type="button" type="button" class="rightside__pad-btn number" value="2">2</button>
<button type="button" type="button" class="rightside__pad-btn number" value="3">3</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="4">4</button>
<button type="button" type="button" class="rightside__pad-btn number" value="5">5</button>
<button type="button" type="button" class="rightside__pad-btn number" value="6">6</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="7">7</button>
<button type="button" type="button" class="rightside__pad-btn number" value="8">8</button>
<button type="button" type="button" class="rightside__pad-btn number" value="9">9</button>
<br />
<button type="button" id="del" class="rightside__pad-btn del">
</button>
<button type="button" class="rightside__pad-btn number" value="0">0</button>
<button type="button" id="dial" class="rightside__pad-btn" value="">
</button>
    
    
    </form>

  
</body>
</html>

推荐阅读