0

I have an input field and I want to append its text while typing in it and persisting the previous value in it

Following is the code 

<input type="text" id="txt1" name="type_name" value="Value1-" onchange="dosomething()">

What I want is when the user starts typing it the starting text of input field should remain there which is "Value1-" and append the text in it like "Value1-3433".

I hope you get my point a little help on this will be appreciated.

shyammakwana.me
  • 5,562
  • 2
  • 29
  • 50
Shakoor Alam
  • 187
  • 1
  • 5
  • 20
  • Can you explain more? is this fiddle ok for you? http://jsfiddle.net/Ry3Lv/1/ – Anoop Joshi P May 28 '14 at 09:37
  • Well I want to append the input of the text on key presses while retaing the "Value1-" text and append the newly written text after it . More simple the input field will already be filled when the form is loaded with value "Value1-" and will be readonly all I want is the Value1- text to be readonly and I can edit and enter new text after it – Shakoor Alam May 28 '14 at 09:40
  • Which means, user cant delete that "value1"? – Anoop Joshi P May 28 '14 at 09:45
  • yes user can't delete the value1.. you are correct – Shakoor Alam May 28 '14 at 10:08
  • @ShakoorAlam Check my answer, it won't allow the user to delete `Value1-` – Bhavik May 28 '14 at 10:34

4 Answers4

4

If I got it correct,with pure JavaScript,this is what you need to do:

  1. Call a function start() when the page loads with <body onload="start()">. Print the text "Value1-" in the input TextField. Since this function is called only once,the Value1- will be printed only once.
  2. Create another function append() which you should call using onchange() and do:
    `document.getElementById('outputText').value=document.getElementById('txt1').value.

Hope this helps.

HackCode
  • 1,837
  • 6
  • 35
  • 66
1

Working Fiddle

  1. Append a label with position:absolute
    HTML

    <label id="lbl" for="txt1"></label> <input type="text" id="txt1" name="type_name" value="" />

    And fire an onchange event, to change add the Value1- and users input...

  2. Add Value1 onchange event

    $('#txt2').change(function () { var str = $(this).val().replace('Value1-',''); $(this).val('Value1-'+str); });

  3. Finally, I guess what you needed is here...

$('#txt3').keypress(function (e) { var pos = $(this).getCursorPosition(); if (pos < 7 ||(pos==7 && e.keyCode == 8) ) { e.preventDefault(); } });

Source : Made with great support from this answer by @MarkB29

Community
  • 1
  • 1
Bhavik
  • 4,836
  • 3
  • 30
  • 45
  • put your cursor between "Value1-" and type anything , it will allow you to type. That's bug. You should also check text field value, not only cursor position. – shyammakwana.me May 28 '14 at 10:38
1

Use the following code to achieve this.

Jquery code:

$('#txt1').on('keyup',function(){

var str=$(this).val();
var newstr = str.substring(0, 7);

if(newstr != "Value1-")
{       
    $(this).val("Value1-");
}  

});

HTML Code:

<input type="text" id="txt1" name="type_name" value="Value1-">

Working Jsfiddle link

http://jsfiddle.net/spdZW/1/

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
1

is this what you want ?

DEMO

jQuery

$('#txt1').on('keyup',function(){
    console.log($(this).val().substr( 0 , 7)) ;
    if($(this).val().substr( 0 , 7) != "Value1-") {
        $(this).val('Value1-');
    }
});

HTML

<input type="text" id="txt1" name="type_name" value="Value1-" >
Community
  • 1
  • 1
shyammakwana.me
  • 5,562
  • 2
  • 29
  • 50