CODEWITHSUNDEEP
javascriptjqueryhtml
Komarzer
Komarzer

Reputation: 637

Specify first character of input

I have an input where I want the first character to be #. That means if the user writes something, it automatically adds the #, or better, the # is already present in the input.

How do I do that? I thought i could do that with jQuery mask but I couldn't make it work.

Upvotes: 2

Views: 256

Answers (5)

Rahul
Rahul

Reputation: 18557

Here is the code,

$("#your-input-id").keypress(function(e) {
    if (e.keyCode != 8) {
        var text = this.value;
        if (text.length == 0) {
            this.value = text + '#';
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form action="#">
  <input id="your-input-id"  type="text" placeholder="Type a text here..." data-prefix="#" />
</form>

Hope this will work.

This will append # when you will start typing, and it will append everything later to #.

EDIT

$("#your-input-value").keydown(function(e) {
    var cur_val=$(this).val();
    var field=this;
    setTimeout(function () {
        if(field.value.indexOf('#') !== 0) {
            $(field).val(cur_val);
        } 
    }, 1);
});

Upvotes: 1

Amit Jamwal
Amit Jamwal

Reputation: 649

<input id='e' onKeyup='test(this)' value='#'/>

var input = document.getElementById('e');

function  test(e){
input.value = e.value.charAt(0) !== '#' ? input.value = '#' + e.value : e.value
}

hope this helps...

Upvotes: 0

Farooq Ahmed Khan
Farooq Ahmed Khan

Reputation: 4094

As you stated, if there is already a SLASH it should not do anything. Here is the solution

$('#description').bind('input', function(event){
  var currentVal = $(this).val();
  $(this).val(currentVal.indexOf('#') !== 0 ? ('#' + currentVal) : currentVal)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label name="description">Enter some text</label>
<input type="text" id="description" name="description">

Upvotes: 0

David R
David R

Reputation: 15637

You can try this,

HTML

<input type="text" class="txtUrl" />

Javascript

$('.txtContent').keydown(function(e) {
     var cur_val = $(this).val(); 
    if(cur_val.length == 0) {
      $(this).val('#' + cur_val);
    }
});

Here is the working fiddle: http://jsfiddle.net/jMH9b/43/

Hope this helps!

Upvotes: 0

Ala Eddine JEBALI
Ala Eddine JEBALI

Reputation: 7841

See this solution http://codepen.io/bachors/pen/yeJOrg

Running example to meet your needs:

/***********************************************
* #### jQuery Prefix Input ####
* Coded by Ican Bachors 2015.
* http://ibacor.com/labs/jquery-prefix-input/
* Updates will be posted to this site.
***********************************************/

$(".yourClass").focus(function(){var a=$(this).data("prefix"),ibacor_currentId=$(this).attr('id'),ibacor_val=$(this).val();if(ibacor_val==''){$(this).val(a)}ibacor_fi(a.replace('ibacorat',''),ibacor_currentId);return false});function ibacor_fi(d,e){$('#'+e).keydown(function(c){setTimeout(function(){var a=bcr_riplis($('#'+e).val()),qq=bcr_riplis(d),ibacor_jumlah=qq.length,ibacor_cek=a.substring(0,ibacor_jumlah);if(a.match(new RegExp(qq))&&ibacor_cek==qq){$('#'+e).val(bcr_unriplis(a))}else{if(c.key=='Control'||c.key=='Backspace'||c.key=='Del'){$('#'+e).val(bcr_unriplis(qq))}else{var b=bcr_unriplis(qq)+c.key;$('#'+e).val(b.replace("undefined",""))}}},50)})}function bcr_riplis(a){var f=['+','$','^','*','?'];var r=['ibacorat','ibacordolar','ibacorhalis','ibacorkali','ibacortanya'];$.each(f,function(i,v){a=a.replace(f[i],r[i])});return a}function bcr_unriplis(a){var f=['+','$','^','*','?'];var r=['ibacorat','ibacordolar','ibacorhalis','ibacorkali','ibacortanya'];$.each(f,function(i,v){a=a.replace(r[i],f[i])});return a}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form action="#">
  <input id="yourInput" class="yourClass" type="text" placeholder="Type a text here..." data-prefix="#" />
</form>

Upvotes: 0

Related Questions