[英]Fix a character to text input box using javascript/jquery
I am looking for a way to 'fix' a dollar symbol $ to a text input box eg <input type="text" value="$" />
but make it not possible for the default value to be removed, so that whatever the user inputs, there is always a $ symbol 'prepending' input. 我正在寻找一种方法来“修复”美元符号$到一个文本输入框,例如
<input type="text" value="$" />
但是不能删除默认值,所以无论如何在用户输入时,总会有一个$符号'prepending'输入。
Cheers 干杯
There is the possibility of a background-image
but it's difficult to maintain, and doesn't react to font size changes, which makes it the less optimal choice IMO. 有
background-image
的可能性,但它很难维护,并且不会对字体大小的变化做出反应,这使得它成为IMO不太理想的选择。
A better way in my opionion would be: 我的选择更好的方法是:
Put a <span>$</span>
next to the input (before it, actually). 在输入旁边放一个
<span>$</span>
(实际上在它之前)。
give it position: relative; left: 20px
给它一个
position: relative; left: 20px
position: relative; left: 20px
. position: relative; left: 20px
。
The $ sign then moves into the input field. $符号然后移动到输入字段。
Then, give the input field padding-left: 24px
. 然后,给输入字段
padding-left: 24px
。
Voilá! 瞧! The $ sign is in the input field, does not obscure anything, and cannot be removed.
$符号位于输入字段中,不会遮挡任何内容,也无法删除。
Expanding on Pekka's answer, I used this on my page, but I automated it a little bit with jQuery. 扩展了Pekka的答案,我在我的页面上使用了这个,但是我使用jQuery对它进行了一些自动化。 So for this example, all of the input fields that I want to put a $ symbol in, I give them a class of "cost".
因此,对于此示例,我想要将$符号放入的所有输入字段,我给它们一个“成本”类。
<style type="text/css" media="screen">
.cost{
position: relative;
left: 20px;
}
input.cost{
padding-left: 24px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#lcce form input.cost").wrap('<div class="cost">');
$("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>
This will place the span with a class of "cost" right before your input, and also wrap a div around both the input, and the span, so they are ensured to be on the same line. 这将在输入之前将跨度与“成本”类放在一起,并且还在输入和跨度周围包含div,以确保它们位于同一行。
If you don't have jQuery, you can get it from: jQuery.com 如果您没有jQuery,可以从jQuery.com获取它
Now I've got a quick question - I noticed that with this styling, in IE6,7, and 8, the $ symbol is not lined up correctly. 现在我有一个简单的问题 - 我注意到这个样式,在IE6,7和8中,$符号没有正确排列。 Does anybody out there have a fix for this?
那里有人有解决方法吗?
Thank you! 谢谢!
I did it like this: 我是这样做的:
$('#price').keypress(function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if ($(this).val().indexOf('$') === -1){
document.getElementById("price").value = "$" + $(this).val();
} else {
document.getElementById("price").value = $(this).val();
}
});
with <input type="text" id="price">
. 用
<input type="text" id="price">
。
User can remove the dollar sign manually though if he/she wants to. 如果他/她想要,用户可以手动删除美元符号。
Is this as a visual effect only? 这只是视觉效果吗? If yes you could apply that with CSS as a background image on the input.
如果是,您可以将CSS作为背景图像应用于输入。
Afterwards, on the server, you can do whatever you want with the value (eg prepend it with $). 然后,在服务器上,您可以使用该值执行任何操作(例如,使用$前置)。
I too have been looking at different solutions for this. 我也一直在寻找不同的解决方案。 Using css to indent the text with padding and putting a background image in that position is your best bet.
使用css用填充缩进文本并将背景图像放在该位置是最好的选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.