文本框可以只读一半，可编辑一半 [英] 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);
} 

我想要Ticket 12345＃必须在表单中附加子持有人字段正在提交。但是通过添加上面的jquery代码，它正在工作，但Ticket 12345＃是可编辑的。

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.

我如何只添加Ticket 12345＃到文本字段，但不可编辑。 p>

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

推荐答案

好吧，我想我明白你的意思是试试这个，我写道，今天晚上，doenst花了很多时间。也许我需要将来，如果不是我给你发一个帐单，）

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 =textid =inputAvalue =testIT />

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"));

这篇关于文本框可以只读一半，可编辑一半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！