Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / jQuery

Dynamically Creating Input Fields on Tab via CoffeeScript and jQuery

0.00/5 (No votes)
4 May 2012CPOL 15K  
How to dynamically create input fields on tab via CoffeeScript and jQuery

Below is my very own, very first, super-clean, super-sexy CoffeeScript snippet that dynamically appends input fields as the user tabs through the current input field. The source-code is on the left. On the right, you can actually play with it and see it in action!

JavaScript
inputId = 1;
 
jQuery -> 
  $("#fields :input").live 'keydown', (e) ->
    if isModifierKeyPressed e
      return 
 
    if e.keyCode == 9 or e.keyCode == 13
      e.preventDefault
 
      if isLastActivity($(this).attr 'id')
	addAnotherTextInput();
 
      $(this).next().focus();
      return false
 
isModifierKeyPressed = (e) ->
  return e.ctrlKey or e.altKey or e.shiftKey
 
isLastActivity = (inputFieldId) ->
  inputNumber = 
    (Number) inputFieldId.split('activity')[1]
  return inputNumber == inputId
 
addAnotherTextInput = ->
  inputId++
  $("#fields").append getInputField inputId
 
getInputField = (inputId) ->
  return "<input type='text' id='activity#{inputId}' 
                 class='input-super-large' 
                 placeholder='Type something and then press tab' />"

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)