CODEWITHSUNDEEP
javascriptjqueryhtmldom
Asit
Asit

Reputation: 63

can a text box be half read only and half editable

<form>
<div class="col-sm-2" style="margin-top: 5px;color:#357EBD;font-weight:bold;" id="sub-ticketid"><?php echo 'Ticket 12345#'; ?></div>
<input type="text" class="form-control" style="background:#fff;" name="sub-holder" id="sub-holder" placeholder="Subject" disabled="true"/> 
</form>

i am adding 

if($('#sub-ticketid')) {
    var preText = $.trim($('#sub-ticketid').text());
    var tempSub = preText+$('#sub-holder').val();
    $('#sub-holder').val(tempSub);
}

I want Ticket 12345# has to pre append with sub-holder field when form is submitting. But by adding above piece of jquery code it is working but Ticket 12345# is editable.

How i can add only Ticket 12345# into text field but not editable.

Upvotes: 1

Views: 2514

Answers (2)

Tarun Sharma
Tarun Sharma

Reputation: 552

function eidt() {
  var readOnlyLength = $('#page_name_field_hidden').val().length;
  $('#page_name_field').on('keypress, keydown', function(event) {
    if ((event.which != 37 && (event.which != 39)) &&
      ((this.selectionStart < readOnlyLength) ||
        ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
      return false;
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="page_name_field" type="text" onclick="eidt()" name="app_name" value="12345#" size="50" />
<input id="page_name_field_hidden" type="hidden" value="12345#" size="50" />

Upvotes: 1

user3299259
user3299259

Reputation:

okay i think i understand what you mean try this out, i wrote that this evening, doenst take much time. perhaps i need in the future, if not i send you a bill ,)

HTML: <input type="text" id="inputA" value="testIT" />

in script add this Class constructor

//***************************************************************
//-------------------------------------- Class halfEditable_INPUT
//***************************************************************
//-- divides an Input into an non editable area from 0 to index, but not including the index, the rest is editable

//-----------------------------------------------------
//-------- constructor
//----------------------------------------------------- 
function halfEditable_INPUT (inputField,index)
    {
    if (typeof index=="undefined") index=inputField.value.length;

    //------------------------------------ PUBLIC Objects, Properties
    this.element=inputField; 
    this.index=index;

    //-- a reference to the instance of the halfEditable_INPUT class saved in the html element, to get instance values in DOM events
    Object.defineProperty (inputField,"halfEditable_instance",{value:this,writable: false, enumerable:true, configurable:true});     

    //-- get the value of the input directly
    Object.defineProperty (this,"value",                      {get:this.PRIVATE_getValue,set:this.PRIVATE_setValue});

    inputField.addEventListener ("keydown",this.PRIVATE_checkStatus_ONKEYDOWN);
    }

//-----------------------------------------------------
//-------- prototype
//-----------------------------------------------------

//------------------------------------ PRIVATE Methods

/*  this      ---    points to the input field
        checks if the cursorPosition is in the non Editable area or is at the limit Point
        if it is at the limitPoint - dont allow backspace or cursor left
        if it is inside allow nothing and move cursorPosition to the limit
        reset the Position1 key to index  */
halfEditable_INPUT.prototype.PRIVATE_checkStatus_ONKEYDOWN=function (event)
    {
    var keyCode=event.keyCode;
    var index=this.halfEditable_instance.index;
    var selectionStart=this.selectionStart, selectionEnd=this.selectionEnd;

    if (keyCode==36) //-- position1 key
        {
        event.preventDefault();
        this.setSelectionRange (index,index);
        return;
        }

    if (selectionStart<index)
        {
        if (selectionEnd>index) this.setSelectionRange (index,selectionEnd);
        else this.setSelectionRange (index,index);
        }
    else if (selectionStart==index) {if (keyCode==8 || keyCode==37) event.preventDefault();} //-- backspace, left cursor
    }

halfEditable_INPUT.prototype.PRIVATE_setValue=function (value) {this.element.value=value;}
halfEditable_INPUT.prototype.PRIVATE_getValue=function () {return this.element.value;}

//-----------------------------------------------------
//-------- prototype    -- END
//-----------------------------------------------------

//***************************************************************
//-------------------------------------- Class halfEditable_INPUT -- END
//***************************************************************

var inputA=new halfEditable_INPUT(document.getElementById ("inputA"));

Upvotes: 0

Related Questions