CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Farooq
Farooq

Reputation: 21

Input text field text cursor is not appear?

I have two input fields, one is a main window and the other is a hidden modal box. The hidden (modal box) is shown but modal box's input field cursor does not appear and appears in background main window's input field instead.

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

Upvotes: 1

Views: 4070

Answers (4)

Ashok kumar
Ashok kumar

Reputation: 542

Add focus to the input element while pop up the input box .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>

Upvotes: 0

prasanth
prasanth

Reputation: 22500

Apply autofocus in <input type="text" id="input_1" autofocus> you will like this below.

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

Upvotes: 1

Sumit patel
Sumit patel

Reputation: 3903

Add $('#input_1').focus(); in #input_2 click event

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

Upvotes: 0

Satpal
Satpal

Reputation: 133423

Set focus() on input in the modal window.

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

Upvotes: 3

Related Questions