Jquery - Textbox, имеющий два значения, которые нередактируемы

Question

Original Design:

Желаемая Дизайн:

Я хочу иметь Textbox имеющие Предопределенные символы SD и пользователи могут добавлять другие символы или цифры. Но SD нельзя удалить и отредактировать. Является ли это возможным?

Вперед

Answer 1

Вы можете работать вокруг этого, как

<div style="position:relative"> 
    <input type="text" style="padding-left:25px" /> 
    <span style="position: absolute; padding: 3px 0; left: 5px">SD</span> 
</div> 

не забудьте изменить отступы и влево значения в соответствии с вашим и размер шрифта.

Answer 2

Вы можете немного поэкспериментировать с двумя входами и удаленными левыми/правыми границами. Быстрое решение, которое я только что создал, может выглядеть следующим образом:

CSS:

input { 
    border: 1px solid black; 
} 
input[readonly] { 
    border-right: 0; 
    width: 20px; 
} 
input:not([readonly]) { 
    border-left: 0; 
} 

HTML:

<input type="text" value="SD" readonly="readonly"><input type="number" value="123"> 

Демо: http://dabblet.com/gist/9593231

Это до вас, чтобы адаптировать это к вашему общий дизайн.