当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - html text field to have pre appended text which is not modifiable

问题描述:

I would like to have a text field which has pre appended text which is not modifiable.

So when user tries to add text it starts after the pre text.

Also when the form is submitted it should not pass the pre appended text. Its mainly for display purpose but within the text field. I have attached the image which will clarify my question further. For example I would like to add "$" as pre text in the image below. Any help is greatly appreciated.

Note: the $ is dynamic text and so could not be image.

网友答案:

I've made a fiddle with two solutions, both using CSS.

The first uses a data URI of a PNG that contains a dollar sign for the background image of the text input. The second uses a label containing a dollar sign and shifts it over to be on top of the input (you probably should use a span instead of a label, for accessibility's sake).

HTML:

<input type="text" id="bob" />
<br/>
<label for="fred">$</label><input type="text" id="fred" />

CSS:

#bob {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAG1BMVEX///8AAAC/v7/f398/Pz8fHx9/f3+fn59fX19QuZN1AAAAbElEQVQokWNgGFyASRiN7ygYhiKgGCYW6IAs4KgsYCqELCDKLMCehCwQyCyAamhjM5qAiaC4AqpIiaAoqgizuKMQqoAAuwgytxxoiyiSABvQHcwoKgSVBVjEkI1IlEDzCzu6bxnQnY4pQFsAAC/cCbAPkBI2AAAAAElFTkSuQmCC') no-repeat;
    background-size: contain;
    padding-left: 1.1em;
}

label[for="fred"] {
    position: relative;
    left: 15px;
    z-index: 1000;
    font-size: smaller;
}

#fred {
    padding-left: 1.2em;
}

Both of these methods are hacky. A JS solution would be more involved, but handle much more nicely (I just don't have time to implement one).

网友答案:

Here's a neat way using background-image
http://jsfiddle.net/dxu2s/1/

HTML:

<label for="RefundAmount">Enter a refund amount: </label>
<input type="text" name="RefundAmount" id="RefundAmount">

CSS:

#RefundAmount {
    margin: 0;
    padding: 0 0 0 25px;
    width: 100px;
    height: 25px;
    background: #FFF url(http://oi57.tinypic.com/nmncz5.jpg) no-repeat left center;
}

I've also tried using the css psuedo-element :before but it didn't work as input tags doesn't have content in em'.

网友答案:

This is a class i wrote you can use it for free, i didnt test it a lot. if you find a bug let me know

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

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

if you have further questions let me know.

分享给朋友:
您可能感兴趣的文章:
随机阅读: