Question

please refer this jsfiddle

$("#dialog").dialog({
  autoOpen: false
});
$("#opener").click(function() {
  $("#dialog").dialog("open");
});

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <button id="opener">open the dialog</button>
  <div id="dialog" title="Phone Number">
    <input type="button" value="1">
    <input type="button" value="2">&nbsp;<input type="button" value="3"><br />
    <input type="button" value="4">&nbsp;<input type="button" value="5">&nbsp;<input type="button" value="6"><br />
    <input type="button" value="7">&nbsp;<input type="button" value="8">&nbsp;<input type="button" value="9"><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="0">
  </div>
  <input type="text" placeholder="phone number">

</body>

</html>

在这个小提琴链接中，如果我点击每个按钮编号，其值应该反映在文本字段上怎么做？任何建议请

Answer 1

我建议你换两件事。首先将您的电话号码字段设为id＆＃39; phone＆＃39;，如下所示：

<input id="phone" type="text" placeholder="phone number">

其次，添加一个脚本，将按下按钮的值添加到输入值，如下所示：

$( '#dialog input').click (function() {
    $("#phone").val( $("#phone").val() + $(this).val());
})

另请参阅：https://jsfiddle.net/52ec3nzn/7/，或使用此内联脚本来测试解决方案：

＆＃13;

$(function() {
  $( "#dialog" ).dialog({ autoOpen: false });
  $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
  });

  $( '#dialog input').click (function() {
    $("#phone").val( $("#phone").val() + $(this).val());
  });
});

＆＃13;

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Phone Number">
  <input type="button" value="1">
       <input type="button" value="2">&nbsp;<input type="button" value="3"><br />
       <input type="button" value="4">&nbsp;<input type="button" value="5">&nbsp;<input type="button" value="6"><br />
       <input type="button" value="7">&nbsp;<input type="button" value="8">&nbsp;<input type="button" value="9"><br />
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="0">
</div>
<input id="phone" type="text" placeholder="phone number">
 
</body>
</html>

＆＃13;

Answer 2

您需要为弹出按钮绑定偶数，然后将其追加到初始输入。 http://jsfiddle.net/L2y2d/822/

$('#dialog input').on('click', function() {
    var value = $(this).val();
  var oldValue = $('.input').val();

  var newValue = oldValue + value;

  $('.input').val(newValue);
});

Answer 3

$(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});

$( '#dialog input').click (function() {
$("#phone").val( $("#phone").val() + $(this).val());
});
});

Answer 4

尝试将其与jquery

一起使用

$("button class here").click(function(){
    var num = $(this).attr("value")
    $(your target input text here).append(num)
});

Answer 5

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
   $( "#dialog" ).dialog( "open" );
});
$( "#dialog" ).on('click','input[type="button"]',function()
{
   var $phone = $('input[type="text"]').val()+''+this.value;
   $('input[type="text"]').val($phone);
});

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Phone Number">
  <input type="button" value="1">
       <input type="button" value="2">&nbsp;<input type="button" value="3"><br />
       <input type="button" value="4">&nbsp;<input type="button" value="5">&nbsp;<input type="button" value="6"><br />
       <input type="button" value="7">&nbsp;<input type="button" value="8">&nbsp;<input type="button" value="9"><br />
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="0">
</div>
<input type="text" placeholder="phone number">
 
</body>
</html>

Answer 6

您可以为这样的输入元素绑定click事件：

$("input").click(function(){alert(this.value)});

显示文本字段内按钮的值

6 个答案: