Question

我有两个输入字段，一个是主窗口，另一个是隐藏模式框。显示隐藏（模态框），但模态框的输入字段光标不会出现，而是出现在背景主窗口的输入字段中。

$(document).ready(function() {
  $("#input_2").click(function() {
    $(".window").show();
  });
  $("#close").click(function() {
    $(".window").hide();
  });
});

#input_1 {
  margin: 20px;
  padding: 10px;
  margin-left: 150px;
}
#input_2 {
  margin: 20px;
  padding: 10px;
}
.window {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  background: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  display: none;
}
.popup {
  width: 500px;
  height: 300px;
  background: white;
  border-radius: 3px;
  position: absolute;
  left: 30%;
  top: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="window">
  <div class="popup">
    <h2 style="text-align:center;">Hello World!</h2>
    <p style="text-align:center;" id="close">[close]<p>
    <!--@first input text field indside popup window-->
    <input type="text" id="input_1" />
  </div>
</div>
<!--@second input text field outside popup window-->
<input type="text" id="input_2" />

Answer 1

在模态窗口中的focus()上设置input。

$('#input_2').click(function() {
   $('.window').show();
   $('#input_1').focus();
});

$(document).ready(function() {
  $('#input_2').click(function() {
    $('.window').show();
    $('#input_1').focus();
  });

  $('#close').click(function() {
    $('.window').hide();
  });
});

#input_1 {
  margin: 20px;
  padding: 10px;
  margin-left: 150px;
}
#input_2 {
  margin: 20px;
  padding: 10px;
}
.window {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: none;
}
.popup {
  width: 500px;
  height: 300px;
  background: white;
  border-radius: 3px;
  position: absolute;
  left: 30%;
  top: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="window">
  <div class="popup">
    <h2 style="text-align:center;">Hello World!</h2>
    <p style="text-align:center;" id="close">[close]
      <p>
        <!--@first input text field indside popup window-->
        <input type="text" id="input_1" />
  </div>

</div>
<!--@second input text field outside popup window-->
<input type="text" id="input_2" />

Answer 2

在autofocus中应用<input type="text" id="input_1" autofocus>，您将在下面填写此内容。

$(document).ready(function(){
    $('#input_2').click(function(){
        $('.window').show();
      
    });
	
	$('#close').click(function(){
        $('.window').hide();
    });
	
});

#input_1{
margin:20px;
padding:10px;
margin-left:150px;
}
#input_2{
margin:20px;
padding:10px;
}
.window{
width:100%;
height:100%;
position:fixed;
z-index:10;
background: rgba(0,0,0,0.5);
top:0;
left:0;
display:none;
}
.popup{
width:500px;
height:300px;
background:white;
border-radius:3px;
position:absolute;
left:30%;
top:25%;
}

<!DOCTYPE html>
<html>
<head>
<title>PopUp Window</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<div class="window">
<div class="popup">
<h2 style="text-align:center;">Hello World!</h2>
<p style="text-align:center;" id="close">[close]<p>
<!--@first input text field indside popup window-->
<input type="text" id="input_1" autofocus>
</div>

</div>
<!--@second input text field outside popup window-->
<input type="text" id="input_2" />

</body>
</html>

Answer 3

在$('#input_1').focus(); 点击事件

中添加#input_2

$(document).ready(function(){
    $('#input_2').click(function(){
        $('.window').show();
         $('#input_1').focus();
    });
	
	$('#close').click(function(){
        $('.window').hide();
    });
	
});

#input_1{
margin:20px;
padding:10px;
margin-left:150px;
}
#input_2{
margin:20px;
padding:10px;
}
.window{
width:100%;
height:100%;
position:fixed;
z-index:10;
background: rgba(0,0,0,0.5);
top:0;
left:0;
display:none;
}
.popup{
width:500px;
height:300px;
background:white;
border-radius:3px;
position:absolute;
left:30%;
top:25%;
}

<!DOCTYPE html>
<html>
<head>
<title>PopUp Window</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<div class="window">
<div class="popup">
<h2 style="text-align:center;">Hello World!</h2>
<p style="text-align:center;" id="close">[close]<p>
<!--@first input text field indside popup window-->
<input type="text" id="input_1" />
</div>

</div>
<!--@second input text field outside popup window-->
<input type="text" id="input_2" />

</body>
</html>

Answer 4

在弹出输入框的同时将焦点添加到输入元素 .focus();

$(document).ready(function(){
    $('#input_2').click(function(){
        $('.window').show();
$("#input_1").focus();
    });
	
	$('#close').click(function(){
        $('.window').hide();
    });
	
});

#input_1{
margin:20px;
padding:10px;
margin-left:150px;
}
#input_2{
margin:20px;
padding:10px;
}
.window{
width:100%;
height:100%;
position:fixed;
z-index:10;
background: rgba(0,0,0,0.5);
top:0;
left:0;
display:none;
}
.popup{
width:500px;
height:300px;
background:white;
border-radius:3px;
position:absolute;
left:30%;
top:25%;
}

<!DOCTYPE html>
<html>
<head>
<title>PopUp Window</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<div class="window">
<div class="popup">
<h2 style="text-align:center;">Hello World!</h2>
<p style="text-align:center;" id="close">[close]<p>
<!--@first input text field indside popup window-->
<input type="text" id="input_1" />
</div>

</div>
<!--@second input text field outside popup window-->
<input type="text" id="input_2" />

</body>
</html>

输入文本字段文本光标没有出现？

4 个答案: