Question

事实上，这不仅仅是一个真正的价值，只是为了装饰目的，就像一个占位符一样。

我编写了这段代码，只有$符号它可以正常工作，但我无法修改它，例如，因为它可能像＆＃34;来自$＆＃34;或任何其他组合。

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();

它只是添加＆＃34;来自$＆＃34;在每个按键上。这对我来说真的不清楚。

我想也许问题出在val数组中，我尝试了内部索引的不同组合，但它们没有用。

Answer 1

问题是你要比较val [0] ==＆＃34;来自$＆＃34;，这将永远是假的。 val [0]只匹配第一个字符。

这是一个演示如何解决此问题的示例：

function priceInputPlaceholder(){
$( 'input' ).on('input', function() {
        $( this ).val( function( index, val ) {
            return ((val[0] == "F" && 
                     val[1] == "r" && 
                     val[2] == "o" && 
                     val[3] == "m" && 
                     val[4] == "$") || !val) ? val : "From$" + val;
        });
    });
}

priceInputPlaceholder();

Answer 2

您需要测试值中是否存在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$" />

添加一些值，以便在用户更改并保留服务器时将其作为占位符输入

2 个答案: