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

Add some value to input that servers as a placeholder when user changes it and keep it

本文关键字:占位符 保留 输入 服务器 用户 添加      更新时间:2023-09-26

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

我写了这段代码,只有 $ 符号,它可以正常工作,但我无法修改它,例如,它可以像"From $"或任何其他组合。

代码笔链接以演示

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

如您所见,无论如何,它始终将美元符号保留在价值之前。无论我点击多少次或在那里输入什么。

但是,如果我像这样修改它:代码笔链接

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

它只是在每次按键上添加"From$"。这对我来说真的不清楚。

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

您需要

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

问题是您正在比较 val[0] == "From$",它总是假的。 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();