html - 右对齐占位符
问题描述
我有一个我想专门用于货币的文本输入。在文本字段内,应该说 [$Other CAD]。“$Other”应该左对齐,“CAD”应该右对齐,我目前在“$Other”和“CAD”之间只有一堆空格. 这对于不同的浏览器等并不理想。有没有一种简单的方法可以让占位符的“CAD”部分正确对齐,这样无论浏览器如何,它都始终适合?另外,我可以为占位符设置两种不同的文本颜色吗?例如,灰色的“$”和“CAD”,黑色的“Other”
<style>
.donation-amount-input {
height: 65px;
font-size: 34px;
}
.form-control::placeholder {
font-size: 34px;
}
#S {
color: #aaaaaa;
position: absolute;
font-size: 36px;
padding-left: 10px
}
#Other {
position: absolute;
font-size: 36px;
padding-left: 35px;
}
#CAD {
color: #aaaaaa;
position: absolute;
font-size: 36px;
padding-left: 40%;
}
</style>
<body>
<p onclick="fakePlaceholder()" id="S">$</p>
<p onclick="fakePlaceholder()" id="Other">Other</p>
<p onclick="fakePlaceholder()" id="CAD">CAD</p>
<input
type="text"
onselect="fakePlaceholder()"
class="form-control donation-amount-input"
id="other-amount"
/>
</body>
<script>
function fakePlaceholder() {
var S = document.querySelector('S');
S.style.display = 'none';
var Other = document.querySelector('Other');
Other.style.display = 'none';
var CAD = document.querySelector('CAD');
CAD.style.display = 'none';
}
</script>
解决方案
您不能使用占位符来做到这一点,您必须使用 javascript 创建一个假的以获得效果。您必须添加三个元素:一个用于$
,一个用于Other
,一个用于CAD
。然后,您可以设置它们的样式并将它们position: absolute;
放置在输入中以创建假占位符。(不要忘记:您不能将 html 元素放在输入中,因此您必须将输入和三个元素包装到另一个元素中,以便根据它定位所有内容)。
之后,当有人点击或使用键盘移动时,您将不得不使用 javascript 来隐藏这个假占位符。
尝试一下,如果您需要帮助,请返回此处并向我们展示您的代码。
推荐阅读
- ruby-on-rails - 如何使用 Rails 5 的 ActiveRecord 属性提供虚拟列
- maven - Gradle 构建失败,但 Maven 工作
- google-cloud-firestore - 虚拟钱包的 Firestore 幂等性
- routing - webpack 生产版本的“无法获取 /URL”错误,尽管使用 webpack 开发服务器它工作正常
- grafana - 在 Grafana - InfluxDB 数据源中将 count(null) 设为零
- angular - Angular 7 Route Guards 仍然更改 URL
- mysql - 如果我在文本文件的一列中有多个项目,那么如何使用 python 在 SQL 中导入它?
- javascript - 如何在 Javascript 中获取 .val() 的最后一个字符
- go - 图像文件夹的较短路径 - golang
- azure - 构建和推送 IoT Edge 解决方案时没有任何反应