Question

<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>

我正在添加

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

我希望Ticket 12345＃在表单提交时必须预先添加子持有者字段。但是通过添加上面的jquery代码它可以正常工作，但Ticket 12345＃是可编辑的。

我如何只将Ticket 12345＃添加到文本字段中，但不能编辑。

Answer 1

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

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

HTML：＆lt; input type =“text”id =“inputA”value =“testIT”/＆gt;

在脚本中添加此类构造函数

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

Answer 3

两种方式取消默认的onkeydown操作

var textField=document.getElementById("sub-holder");
textField.addEventListener("keydown", function (event) {event.preventDefaults();}

第二禁用输入字段

var textField=document.getElementById("sub-holder");
textField.setAttribute ("disabled",true);

文本框可以是一半只读，一半是可编辑的

3 个答案: