$("#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"> <input type="button" value="3"><br />
<input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"><br />
<input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"><br />
<input type="button" value="0">
</div>
<input type="text" placeholder="phone number">
</body>
</html>In this fiddle link if i click on every button number its value should reflect on text field how to do it?? any suggestions please
最佳答案
我建议你改变两件事。首先为您的电话号码字段提供 ID“电话”，如下所示:
<input id="phone" type="text" placeholder="phone number">
其次，添加一个脚本，将按下的按钮的值添加到您的输入值，如下所示:
$( '#dialog input').click (function() {
$("#phone").val( $("#phone").val() + $(this).val());
})
另请参阅:https://jsfiddle.net/52ec3nzn/7/ ，或使用此内联脚本来测试解决方案:
$(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
$( '#dialog input').click (function() {
$("#phone").val( $("#phone").val() + $(this).val());
});
});<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"> <input type="button" value="3"><br />
<input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"><br />
<input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"><br />
<input type="button" value="0">
</div>
<input id="phone" type="text" placeholder="phone number">
</body>
</html>关于javascript - 在文本字段中显示按钮的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49170324/