javascript - 用 CSS 生成的图像替换输入字段中的文本

Question

我有值为 ON 或 Off 的输入字段，我想将其替换为 CSS 生成的图像。 这可能吗？我问了一个similar question但关于表格中的单元格。我可以用 CSS 生成的图像替换单元格值。但我一直在摆弄 INPUT Type=text 字段，无法找到一种方法来用 input 类型字段进行相同的替换。我在这里看到一些使用存储在 url 中的图片。但是使用 CSS 生成的图像而不是链接到图片会很棒。

代码(html、css、js)is here .

<div class="kn-input kn-input-short_text" id="kn-input-field_95">
  <label for="field_95" class="knack-input-label"> 
    <span class="kn-input-label">Cash</span>
  </label>
  <div class="input">
    <input id="field_95" type="text" value="On">
  </div>  
</div>

<div class="kn-input kn-input-short_text" id="kn-input-field_95">
  <label for="field_97" class="knack-input-label">
    <span class="kn-input-label">Internet</span>
  </label>
  <div class="input">
    <input id="field_97" type="text" value="On">
  </div>
</div>

---

sOn = '<div class="button-wrap"> <div class="button-out">On</div> <div class="button-switch"></div> </div>'

$('span:contains("On")').html(sOn);

最后一行代码用于替换表格中的单元格值。我不知道如何对输入字段值执行相同的操作。

Answer 1

要替换输入字段，只需执行以下操作:

$("input[type='text'][value='On']").replaceWith(sOn);

你的 FIDDLE 用上面一行更新。