Кендо форматирование в вход - Изменение цвета символ валюты

Question

Привет У меня есть входной тег в моем HTML

<input class="k-formatted-value k-input" type="text"> 

Значение моего входа является $13.00. Я использовал форматирование кендо при добавлении валюты в текстовое поле.

$(".k-formatted-value ").kendoNumericTextBox({ 
    format: "c", 
    decimals: 2 
}); 

Я хочу, чтобы символ валюты был цветным, а числовое - черным. Как это сделать в jquery?

Answer 1

Ну, один способ я знаю, к входам типа отдельно, чтобы сделать «фальшивый» вход и скрыть реальный, например, так: https://jsfiddle.net/o34swb1j/2/

Однако, это становится своего рода грязным и не всегда работайте, как ожидалось (отсутствует blinker/cursor/caret, нужно стилизовать ввод и divs, чтобы действовать как один)

Честно говоря, я бы решил проблему, с которой вы сталкиваетесь с CSS, а не какой-то тяжелый плагин или даже javascript для этого вопрос .. Вам не нужна валюта в пределах стоимости, не так ли? (Казалось бы странным) Таким образом, решая это с помощью CSS, вы можете сделать это, чтобы просто позволить валюты перекрывать вход, не будучи в ней, как это:

https://jsfiddle.net/r23r9j0b/

Вопрос с этим: Часть вашего ввода будет незаметной (наложение)

Исправление: небольшой обработчик события jQuery и некоторый css, чтобы убедиться, что он похож на часть ввода.

HTML:

<form> 
    <div class="inputWrap"> 
    <input id="myInput" type="text" /> 
    <span class="currency">&euro;</span> 
    </div> 
</form> 

Jquery:

$('.inputWrap .currency').on("click", function() { 
    $(this).parents('.inputWrap').find('input').focus(); 
}); 

CSS:

* { 
    box-sizing: border-box; 
} 

.inputWrap { 
    position: relative; 
    width: 300px; 
    height: 40px; 
    line-height: 40px; 
} 

.inputWrap input { 
    border: 1px solid black; 
    background: white; 
    color: black; 
    z-index: 2; 
    padding-left: 33px; 
} 

.inputWrap input, 
.inputWrap .currency { 
    position: absolute; 
    width: 100%; 
    height: 40px; 
    top: 0; 
    left: 0; 
} 

.inputWrap .currency { 
    color: blue; 
    width: 30px; 
    text-align: right; 
    display: block; 
    float: left; 
    z-index: 2; 
} 

.inputWrap .currency:hover { 
    cursor: text; 
}