How can I turn the focus off when a new input type is added?

Question

How can I turn the focus off when a new inpu is added? I want to do this because when i am on my iPad and press "Add Field" it automatically brings up the keyboard. This is very annoying because sometimes I want to add a few new input fields before entering data.

  $('.multi-field-wrapper').each(function() {
   var $wrapper = $('.multi-fields', this);
   $(".add-field", $(this)).click(function(e) {
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
   });
   $('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
     $(this).parent('.multi-field').remove();
   });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" style="height:50px;">
 <input type="submit" name="stocksave" value="Save" class="float" style = "float:right;">  
 </br></br>
  
   <div class="multi-field-wrapper focusoff">
   
   <div class="multi-fields focusoff">
   <div class="multi-field focusoff">
   <input type="text" name="stockitem[]" autocomplete="off" class="focusoff">
   <select name='piecesdd[]' style='width:150px; '>
   
      <option value='0'>PIECES</option>
      <?php
      $count = 1;
      while ($count<=100) {
     echo "<option value='".$count."'>".$count."</option>";
     $count++;
      };
      ?>
   </select>
   <button type="button" class="remove-field">Remove</button>
   
   <button type="button" class="add-field">Add field</button>
   
   </div>
    
   </div>
     
 </div>
 
  
</form>

You don't want to focus new added element then?! – A. Wolff Oct 21 '15 at 12:57 — A. Wolff, Oct 21 '15 at 12:57

Guruprasad J Rao · Accepted Answer · 2015-10-21T12:59:22.593

2

Remove .focus() from below line on .add-field - click event

$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper)
.find('input').val('').focus()

So it would be just

$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper)
.find('input').val('')

edited Oct 21 '15 at 12:59

answered Oct 21 '15 at 12:58

Guruprasad J Rao

28,253
13
87
176

1

I hope this isn't the answer (even i understand it like this too) because it would be a silly question, isn't it? :) – A. Wolff Oct 21 '15 at 12:59
Yea, Agreed, but if the OP isn't aware that there is `.focus` at the end then, definitely he has to see this :).. @A.Wolff – Guruprasad J Rao Oct 21 '15 at 13:00
1

This has solved my issue.... sorry this seemed a simple question to you but iv been messing around with the focus in css for ages. Thank you BTW @A.Wolff – ellie stone Oct 21 '15 at 13:01
2

@elliestone, Also You can visit **[this link](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser)** to see whether user is on device and keep/remove the `focus` accordingly.. :) – Guruprasad J Rao Oct 21 '15 at 13:03
1

@GuruprasadRao Ya good point, OP would want not focusing element only on specifc device – A. Wolff Oct 21 '15 at 13:04
@elliestone Don't worry, glad you have fixed it – A. Wolff Oct 21 '15 at 13:05

How can I turn the focus off when a new input type is added?

1 Answers1