【问题标题】:Make a placeholder % sign pretend to stay做一个占位符 % 符号假装留下
【发布时间】:2016-01-28 13:38:44
【问题描述】:

这是一个特殊的问题,但是,我有一个输入字段,像这样,

<div class="<?php if(form_error('interest')!= null){echo ' has-error';} ?>">
   <h4><?php echo lang("offer_of_intrest"); ?></h4>
   <input class="form-control" type="text" value="<?php echo set_value('interest'); ?>" placeholder="1%" name="interest">
</div>

占位符说1%,但输入只接受整数(1或2或3等..),我想要做的是以某种方式将百分号保留在占位符内但让用户输入任何数字,但保留百分号,但在提交按钮时,只有数字应该消失,而不是百分号。因为在mysql中它只接受小数位。这就像在占位符中给用户一个假的百分比符号,这样他们就不会感到困惑,而是在输入字段中实际输入 1(PERCENT)。 ,我希望这是可以理解的。

【问题讨论】:

  • 这不是占位符的目的。事实上,您应该使用属性为type="number" 的输入,后跟任何其他代表% 符号的HTML 元素。您的占位符应描述应如何填写您的输入

标签: javascript php jquery html css


【解决方案1】:

由于您似乎在使用 Bootstrap,我将从占位符中删除 % 并使用 input-groupinput-group-addon

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-9">
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputAmount">Percentage:</label>
        <div class="input-group">
          <input class="form-control" type="text" placeholder="1" name="interest">
          <div class="input-group-addon">%</div>
        </div>
      </div>
    </form>
  </div>
</div>

【讨论】:

  • @A.Wolff:我刚刚使用了 OP 的 input
  • @A.Wolff 我没有使用类型数字,因为它有那些箭头可以选择更多或更少的数字,所以没有必要给 -1,我只是想让它看起来更好
  • @T.J.Crowder 感谢您的回答,但我想没有别的办法,我真的不想使用插件
【解决方案2】:

您可以拆分字符串以拼接出 '%' 符号,然后将其转换为 int。 (感谢下面的 Bob Nocraz)

$yourDecimal = rtrim($theVariable, '%');
$result = intval($yourDecimal);

【讨论】:

  • 为什么不直接使用 rtrim($theVariable, '%'); ?
  • 是的。为什么不 ?两种解决方案都做同样的事情:)
  • 只有在输入中有 % 时他们才会做同样的事情。如果输入数据的用户不包含 %,则此解决方案会删除最后一个字符
【解决方案3】:

据我所知,在 Html 中没有解决方案,但您可以在 Javascript 中做到这一点。

$(input).keydown(function(){
   val = $(this).val()
   val = val.slice(val.length, 1);
   val += "%";
})

也许这会起作用

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-05-17
    • 2016-02-18
    • 2011-07-02
    • 1970-01-01
    • 1970-01-01
    • 2018-03-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多