javascript - 添加一些值以在用户更改时作为占位符输入并保留它

Question

事实上，这不会像真正的值一样起作用，只是为了装饰目的，起到占位符的作用。

我编写了这段代码，仅使用 $ 符号就可以正常工作，但我无法修改它，例如，因为它可能像“From $”或任何其他组合。

Codepen link to demostrate

function priceInputPlaceholder(){
    $( 'input' ).on('input', function() {
            $( this ).val( function( index, val ) {
                return (val[0] == "$" || !val) ? val : "$" + val;
            });
        });
    }

 priceInputPlaceholder();

如您所见，无论如何，它总是将美元符号保留在值之前。无论我点击多少次或输入什么内容。

但是，如果我这样修改它:Codepen link

function priceInputPlaceholder(){
    $( 'input' ).on('input', function() {
            $( this ).val( function( index, val ) {
                return (val[0] == "From$" || !val) ? val : "From$" + val;
            });
        });
    }

 priceInputPlaceholder();

它只是在每次按键时添加“From$”。我真的不清楚。

我认为问题可能出在 val 数组上，我尝试了与内部索引的不同组合，但它们不起作用。

Answer 1

您需要测试值中是否存在 From$，因此请使用 String.indexOf() 检查字符串是否存在。喜欢

function priceInputPlaceholder() {
  $('input').on('input', function() {
    $(this).val(function(index, val) {
      return (!val || val.indexOf("From$") > -1) ? val : "From$" + val;
    });
  });
}

priceInputPlaceholder();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" placeholder="From$" />