Question

我希望有一个文本字段，其前附加文本不可修改。因此，当用户尝试添加文本时，它会在预文本之后启动。此外，在提交表单时，它不应传递前面附加的文本。它主要用于显示目的但在文本字段内。我附上了图片，这将进一步澄清我的问题。例如，我想在下图中添加“$”作为预文本。非常感谢任何帮助。

注意：$是动态文本，因此无法成为图像。

enter image description here

Answer 1

我使用CSS制作了fiddle两个解决方案。

第一个使用PNG的数据URI，其中包含文本输入背景图像的美元符号。第二个使用包含美元符号的标签并将其移动到输入的顶部（为了便于访问，您可能应该使用跨度而不是标签）。

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

这两种方法都很笨拙。 JS解决方案会更复杂，但处理得更好（我没有时间实现）。

Answer 2

这是使用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;
}

我也尝试过使用css psuedo-element :before，但它没有用，因为输入标签没有em'中的内容。

Answer 3

这是我写的一个你可以免费使用它的课程，我没有经常测试它。如果你发现了一个错误让我知道

HTML：＆lt; input type =“text”id =“inputA”value =“$”/＆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"));

如果您有其他问题，请告诉我。

html文本字段具有不可修改的前附加文本

3 个答案: