如何获取类似于浏览器提示中的输入值
如何获取类似于浏览器提示中的输入值
提问于 2018-12-30 14:06:15
我需要创建我自己的prompt功能。
在下面的示例中，我如何说：
var x = my_prompt('DO SOMETHING');
console.log(x);因此，单击btnb，我需要在单击btna之后派生的inputxt的值。
$('#btnb').on('click', function(){
my_prompt('DO SOMETHING');
});
function my_prompt(info){
$('#dginfo').text(info);
$('#dialog').show();
$('#inputxt').focus();
}.dialog{
display:none;
position:fixed;
width:50%;
left:25%;
top:25px;
background:gold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
<div id='dginfo'></div>
<input type='text' class='inputxt' id='inputxt'>
<button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-30 14:10:24
一种选择是将回调传递给my_prompt，单击按钮时将调用该回调：
$('#btnb').on('click', function() {
my_prompt('DO SOMETHING', (x) => {
console.log('input entered: ' + x);
});
});
function my_prompt(info, callback) {
$('#dginfo').text(info);
$('#dialog').show();
$('#inputxt').focus();
$('#btna').on('click', () => {
callback($('#inputxt').val());
$('#btna').off('click');
$('#dialog').hide();
});
}.dialog {
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 25px;
background: gold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
<div id='dginfo'></div>
<input type='text' class='inputxt' id='inputxt'>
<button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>
为enter添加额外的监听器
$('#btnb').on('click', function() {
my_prompt('DO SOMETHING', (x) => {
console.log('input entered: ' + x);
});
});
$('#inputxt').on('keypress', ({ keyCode }) => {
if (keyCode === 13) {
$('#btna').click();
}
});
function my_prompt(info, callback) {
$('#dginfo').text(info);
$('#dialog').show();
$('#inputxt').focus();
$('#btna').on('click', () => {
callback($('#inputxt').val());
$('#btna').off('click');
$('#dialog').hide();
});
}.dialog {
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 25px;
background: gold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
<div id='dginfo'></div>
<input type='text' class='inputxt' id='inputxt'>
<button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>
Stack Overflow用户
发布于 2018-12-30 14:15:32
只需将一个变量赋给my_prompt的返回值，并添加一个事件侦听器即可完成此操作：
$('#btnb').on('click', function() {
var data = my_prompt('DO SOMETHING');
});
function my_prompt(info) {
$('#dginfo').text(info);
$('#dialog').show();
$('#inputxt').focus();
return $("#btna").on("click", function() {
return $("#inputxt").val();
}.dialog {
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 25px;
background: gold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='dialog' id='dialog'>
<div id='dginfo'></div>
<input type='text' class='inputxt' id='inputxt'>
<button id='btna'>OK</div>
</div>
<button id='btnb'>CLICK</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53975622
复制相关文章
相似问题
腾讯云开发者
