Is there anyway that I can add functionality to this arrow?
▼
I want it to be clickable and if clicked for it to increase a value of an input by one. So say there is the value of 5 in an input box, if the arrow was clicked, the value would show 6.
Is this possible to do or is there a better approach?
It sounds like you could be looking for the number input type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for a list of input types. The code to make a number input is:
<input type="number">
In HTML
<input type="text" readonly id="textbox" />
<a id="increment" style="cursor:pointer;">▼</a>
In Jquery, add this
$("#increment").click(function(e) {
var old_val = +$("#textbox").val();
var increment = +'1'
var new_val = old_val + increment;
$("#textbox").val(new_val);
});
This will increment the text field value on the arrow click.
Related
I want to display an input type hour from 08:00 to 20:00. I tried this:
<input type="time" id="timeAppointment" name = "timeAppointment" min="08:00" max="20:00" placeholder="hour" required/>
But when I display it I can still select any time, it does not restrict me as I indicate. What is the problem? If is necessary some code I work with Javascript.
The constraints within the input do not prevent from entering an incorrect value in this case. Here is an overview of what MDN says in their documentation:
By default, does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value.
But you can write validations with JavaScript, or visual validations with CSS, like so:
.container{
display:flex;
align-items:center;
gap:1rem;
}
input:invalid+span:after {
content: '✖';
}
input:valid+span:after {
content: '✓';
}
<div class = "container">
<input type="time" id="timeAppointment" name = "timeAppointment" value="08:00" min="08:00" max="20:00" placeholder="hour" required/>
<span class="validity"></span>
</div>
Setting min and max properties in input tags do not inherently prevent you from accepting out of range values as inputs, but it controls the valid property of the tag, which can then be used such as in css to style your page accordingly. Some browsers do make it so that you cannot input out of the specified range, but it is not platform-independent behaviour.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#setting_maximum_and_minimum_times
If you want to ensure that only the time between min and max are input, you could programmatically implement that using an onchange listener on your input element as follows:
Make sure to indicate to the user why their input is not changing (because it is not between min and max) using css and text, etc.
const timeInput = document.getElementById("timeAppointment");
timeInput.value = '15:56';
let previousValue = timeInput.value;
timeInput.onchange = () => {
console.log(previousValue)
console.log(timeInput.value)
if (timeInput.value < timeInput.min || timeInput.value > timeInput.max) {
timeInput.value = previousValue;
}
previousValue = timeInput.value;
}
<input type="time" id="timeAppointment" name="timeAppointment" min="08:00" max="20:00" required/>
However, there is a caveat to this. Imagine you are changing your time from 02:00PM to 11:00AM. You would go from left to right, and as soon as you change 02 hours to 11 hours, the javascript validation fails as it becomes 11:00PM and the value is not able to update.
Either you will have to write a convoluted way to get around all the edge cases, or the users will have to find a weird way to change their time. This is why this is generally a bad idea to validate on every input like this, and instead you can validate it when you submit the form, or onfocusout and let the user know by appropriate styling.
is it possible to mask a letter as whitespace in HTML? In this case I would like to mask UNDERSCORE(_) as a whitespace
<input type="text" value=I_NEED_TO_HIDE_UNDERSCORE>
You can use the change event to listen for alterations to the input value and then the replace method to replace your desired letter with a blank space.
However, note that with <input type="text" elements, "the change event doesn't fire until the control loses focus" – MDN. In other words, this usually means that you have to 'click away' from the input field before the event fires.
const input = document.querySelector('input');
// add event listener
input.addEventListener('change', updateInput);
function updateInput() {
// replace set letter (in this case underscore) with blank space
input.value = input.value.replace("_", " ");
}
<input type="text" placeholder="Enter text">
If you want the input value to be updated straight away (as the value of the <input> element changes), you can use the input event instead:
...
// add event listener
input.addEventListener('input', updateInput);
...
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
I have this label:
<label id="options_31409_3label" for="options_31409_3"><span>some text</span></label>
As you see, there is some text in the label inside a span. Now I also have a radio button, which is left of the label:
<input id="options_31409_3" class="radio" type="radio" value="72058" name="options[31409]" onclick="xyz()">...</input>
This is one radio and one label, but I have several radio buttons and labels on the same site. Now from those N labels and radio buttons I have to identify one pair and do some Prototype stuff with it. The pair has a different id each time the site is loaded, the only thing that stays is the text inside the span. Is there a way to get the label and the radiobutton if there is "some text" inside the span? I can use Prototype if that helps.
Thanks!
Because you know that label's id consists of input's id + 'label', you can use e.g. the following code to find a pair:
$$('input[type=radio]').each(function()
var input = this;
var label = $(this.id + 'label');
// do something for input and label
});
The labels for attribute, if used correctly, should have the same value as the inputs id attribute. So, you can easily find out which label belongs to which input like this:
$$('label').each(function () {
var label = this;
var input = document.getElementById(label.getAttribute('for'));
});
I would choose to improve jholser's snippet to work with all labels, not just those that have 'label' in their ID.
$$('input[type=radio]').each(function(input)
{
// Several labels may link to the same input
$$('label[for="' + input.identify() + '"]').each(function(label)
{
// do something for input and label
});
});
I don't know if this is possible but I would like to have an input field where I would have a value that is not editable by the user.
However, I don't want the input field to be "readonly" because I still want the user to be able to add text after the value.
If you have any idea on how to do this, let me know please that would help me a lot.
EDIT: I use html forms.
You can position the text on top of the input field to make it look as if it is inside it. Something like this:
<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span>
This way your input field will start with "19" which can not be edited, and the user can add information behind this.
Basically what you do is set the input field to a fixed width, so that you know how much negative margin-left to give the span with your text in it in order for it to be positioned exactly at the start of the input field.
You might need to fiddle with the margin-left of the span depending on the rest of your css.
Then also adding pedding-left to the input field, to make sure the user starts typing after your text and not under it.
font:inherit should make sure both your text and the text typed by the user are in the same font.
And if you want to put anything to the right of this input field, do add margin-right to the span with your text, as otherwise other content might start running over your input field as well.
seems a little weird to me ..why not just use a text output and afterwards the input field?
like sometimes used for the birthdate (although, maybe not anymore..)
birthyear: 19[input field]
edit:
with some javascript stuff you could realise something like that you asked for, though
an input field with text and catching keystrokes within that field while only allowing some after what you want to be always there - but, well, you would need to use js ..and if its just for that, Id rather say its not necessary
edit:
if you want to use a trick just for the viewer you could use a background-image/border-style that surrounds a text and the input field, thus making it look like text and input are the same input-box.
Sounds like you want placeholder text. In HTML5 you can set the placeholder attribute on any input element. This will work in modern browsers.
<input type="email" placeholder="jappleseed#appletree.com" name="reg_email" />
Now, for older browsers this won't work. You'll need a JavaScript alternative to provide the same UI value.
This can work for all browsers:
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
but it's not recommended because there is a better way (really, it's a combination of the first two approaches): Use HTML5 markup for new browsers; jQuery and modernizr for old browsers. This way you can have only one set of code that will support all user cases.
Taken directly from webdesignerwall.com:
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>
[You'll need both jquery.js and modernizr.js installed in the same folder as your webpage.]
Note: I have a feeling that a little more research might reveal that modernizr isn't needed for this at all, though I could be wrong about that particular point.
Perhaps, then, you want a select menu?
<select name="mySelectMenu">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Sorry if this isn't what you want either. I'm grasping at straws because what you are asking for is very vague. Maybe you should give an example of what one of these 'editable but not editable' inputs would be used for.
Also, you could use a select and a text input.
The main problem is to determine the position of the cursor. This can be done e.g. using the following function:
function getCaret(el) {
var pos = -1;
if (el.selectionStart) {
pos = el.selectionStart;
}
else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r != null) {
var re = el.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
pos = rc.text.length;
}
}
return pos;
}
Now you can install an event handler for the key press and check whether the pressed key was inside the immutable part of the value of the textarea. If it was there the event handler returns false, otherwise true. This behavior can be wrapped into a simple object:
function Input(id, immutableText) {
this.el = document.getElementById(id);
this.el.value = immutableText;
this.immutableText = immutableText;
this.el.onkeypress = keyPress(this);
}
function keyPress(el) {
return function() {
var self = el;
return getCaret(self.el) >= self.immutableText.length;
}
}
Input.prototype.getUserText = function() {
return this.el.value.substring(this.immutableText.length);
};
var input = new Input("ta", "Enter your name: ");
var userText = input.getUserText();
You can check it on jsFiddle (use Firefox or Chrome).
I came up with this:
```
if (e.target.value == '' || e.target.value.length <= 3) {
e.target.value = '+91-';
}
```