输入文本字段文本光标未出现

Input text field text cursor is not appear?

本文关键字：文本 光标 字段 输入      更新时间：2023-09-26

我有两个输入字段，一个是主窗口，另一个是隐藏的模态框。显示了隐藏的(模态框)，但是模态框的输入字段光标没有出现，而是出现在后台主窗口的输入字段中。

$(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" />

在模态窗口中设置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" />

将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>

在#input_2中添加$('#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%;
}
<!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>

在弹出输入框时为输入元素添加焦点

.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>

相关文章：