Need help to make "%" sign show up automatically to my input field when user type number
<input type="text" name="ownership" id="ownership" placeholder="2.00%">
like here: If user enter some number it will always add "%" sign in view. Probably should use some js, but I'm not familiar yet.
I have tried This way, but it works for every input
<script type="text/javascript">
$('input').change(function() {
$(this).val(function(index, old) { return old.replace() + '%'; });
});
</script>
Need help to make "%" sign show up automatically to my input field when user type number
<input type="text" name="ownership" id="ownership" placeholder="2.00%">
like here: If user enter some number it will always add "%" sign in view. Probably should use some js, but I'm not familiar yet.
I have tried This way, but it works for every input
<script type="text/javascript">
$('input').change(function() {
$(this).val(function(index, old) { return old.replace() + '%'; });
});
</script>
Share
Improve this question
edited Jun 12, 2018 at 22:03
Philipp Kishkovarov
asked Jun 12, 2018 at 21:50
Philipp KishkovarovPhilipp Kishkovarov
2231 gold badge5 silver badges20 bronze badges
5
- 1 What have you tried so far? This is not a code-writing service. – mhodges Commented Jun 12, 2018 at 21:53
- does it have to be inside the input box? does it have to be at the end? does it have to only appear after the user starts typing? – user9487972 Commented Jun 12, 2018 at 21:53
- 1 sorry, won't click a *.ru link with a code attached... – Jeff Commented Jun 12, 2018 at 21:53
- 1 sorry, I forgot to add code:( First post updated – Philipp Kishkovarov Commented Jun 12, 2018 at 21:57
- @jeff sorry man, I thought joxi is enough popular screenshot service to post it here as support thing. I uploaded image right here – Philipp Kishkovarov Commented Jun 12, 2018 at 22:04
2 Answers
Reset to default 4If you use Boostrap this should work :
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
https://jsfiddle/uv9s6q02/
Seeing the code would help, but you can test to see if the user has typed a number using regex.
input.addEventListener('keyup', () => {
if (inputvalue.search(/\d/) > -1) { /* add % */ }
});