Question

嗨，我的html中有一个输入标签

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

我的输入值为$13.00。我在文本框中添加了货币时使用了kendo格式。

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

我希望货币符号为蓝色，数字颜色为黑色。我怎么能在jquery中做到这一点？

Answer 1

嗯，我所知道的单独输入风格的一种方法是制作一个＆＃34;假的＆＃34;输入并隐藏真实的，如下： https://jsfiddle.net/o34swb1j/2/

然而，这有点乱，并且不会像预期的那样工作（缺少闪光灯/光标/插入符号，必须设置输入样式并将div设置为一个）

老实说，我会解决你用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;
}

输入中的剑道格式 - 更改货币符号的颜色

1 个答案: