How to auto format my textbox in license format?

70
June 12, 2018, at 2:10 PM

I tried searching on the internet for answer but the closest I can find is in this jfiddle

What I wanted to do is when the page loads, the textbox is automatically filled with this words Furniture/Chair/Square. In addition, the user can input some text next to the words like this Furniture/Chair/Square/_ _ _/_ _ _. The user cannot erase the automatically filled words.

Answer 1

This is a work around with some reference from jwa's post and RegEx:

$(function() { 
  $('label.prefilled input[type="text"][placeholder]').on('input', function() { 
    var fmt = this.placeholder.split(''); 
    var len = this.placeholder.match(/_/g).length; 
    var val = this.value.replace(/[^a-z]/gi, '').split('').slice(0, len); 
    var res = '', 
      v, f; 
    while ((v = val.shift()) && (f = fmt.shift())) { 
      if ('_' === f) { 
        res += v; 
      } else { 
        res += f + v; 
        fmt.shift(); 
      } 
    } 
    res += fmt.join(''); 
    this.value = res; 
  }).trigger('input'); 
});
label.prefilled input[type="text"] { 
  border: none; 
  outline: none; 
} 
 
label.prefilled { 
  border: 1px ridge gray; 
} 
 
div.card { 
  margin: 5px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="card"> 
  <label class='prefilled'> 
  Furniture/Chair/Square/<input type="text" placeholder="___/___"/> 
</label> 
</div> 
<div class="card"> 
  <label class='prefilled'> 
  Electronic/Handheld/<input type="text" placeholder="______/______"/> 
</label> 
</div>

How do I include numbers?

Use [^a-z0-9] in this line this.value.replace(/[^a-z]/gi, '')

$(function() { 
  $('label.prefilled input[type="text"][placeholder]').on('input', function() { 
    var fmt = this.placeholder.split(''); 
    var len = this.placeholder.match(/_/g).length; 
    var val = this.value.replace(/[^a-z0-9]/gi, '').split('').slice(0, len); 
    var res = '', 
      v, f; 
    while ((v = val.shift()) && (f = fmt.shift())) { 
      if ('_' === f) { 
        res += v; 
      } else { 
        res += f + v; 
        fmt.shift(); 
      } 
    } 
    res += fmt.join(''); 
    this.value = res; 
  }).trigger('input'); 
});
label.prefilled input[type="text"] { 
  border: none; 
  outline: none; 
} 
 
label.prefilled { 
  border: 1px ridge gray; 
} 
 
div.card { 
  margin: 5px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="card"> 
  <label class='prefilled'> 
  Furniture/Chair/Square/<input type="text" placeholder="___/___"/> 
</label> 
</div> 
<div class="card"> 
  <label class='prefilled'> 
  Electronic/Handheld/<input type="text" placeholder="______/______"/> 
</label> 
</div>

Answer 2

You can do this by assigning a label to the input field you create. For example...

#text-input { 
    border: none; 
    outline: none; 
} 
label{ 
    border:solid 1px black; 
    padding-right: 2px; 
}
<label for="text-input"> 
  furniture chair square 
  <input type="text" id="text-input" /> 
</label>

Answer 3

Use RegExp to solve your problem.

You may add some css or addition text to notice the user error input.

function checkStr(str){ 
    //check pattern 
    result = str.match(/^Furniture\/Chair\/Square([a-zA-Z\/]+)?/) 
    if(result == null || result[0].length !== str.length){ 
      //revert the input field to default 
      document.getElementById('userText').value = "Furniture/Chair/Square" 
    } 
}
<input type="text" value="Furniture/Chair/Square" id="userText" oninput="checkStr(value)"></input> 
<p id='asd'></p>

READ ALSO
center group element in another shape svg keith wood

center group element in another shape svg keith wood

I try to center horizontally and vertically group element inside another with the svg plugin of keith-wood, but nothings worksI want if an user click's on a element (polygons mostly of the time) the group element is positionated at the center of the element

89
Convert form data to JSON with JQUERY

Convert form data to JSON with JQUERY

How do I convert some elements of my form to a JSON?

141
How to read in pbf tiles and create layer for display?

How to read in pbf tiles and create layer for display?

I am using Leaflet and I have a bunch ofpbf files that need to be rendered to return a layer

60
Catch the Click Bot

Catch the Click Bot

I know that you can detect jquerytrigger('click') with e

91