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
});
});
Related
<label [invalid]="false" invalidText="" placeholder="Placeholder text">
Middle names (optional)
<input ibmText [attr.disabled]="isApplicationLocked" [invalid]="false" placeholder=""
(keyup)="applicantControlValueChanged()" formControlName="PersonMiddleName">
<label>
In my angular project (using typescript). I have a Boolean called "isApplicationLocked". When this boolean is true, it will disable the text box and not allow the user to edit the text. However, not all portions of the textbox are greyed out. The border and label still remain as black. How am I able to dynamically change the colour of all attributes in the text box, based on this value?
I am also using scss
First, you add the isApplicationLocked variable into the form group.
this.formGroup = this.formBuilder.group({
PersonMiddleName: new FormControl(
...
),
disabled: this.isApplicationLocked
});
And then, you need to create a subscription for changing of this value.
this.formGroup.get("disabled").valueChanges.subscribe(value => {
this.changeDisabledState(value);
});
Here changeDisabledState function is to change the disabled state of the input control.
changeDisabledState(value: boolean): void {
if(value){
this.checkoutForm.controls['PersonMiddleName'].enable();
}else{
this.checkoutForm.controls['PersonMiddleName'].disable();
}
}
Use the :read-only CSS pseudo-class, to change the style for readonly mode on input or textarea.
input:read-only,
textarea:read-only {
background-color: #black;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only
I am appending several buttons into an html span tag every time I type on different inputs.
<span id="pill_filters>
<button id="filterCreated">Filter name here</button>
<button id="filterCreated2">Filter name here</button>
</span>
I also wanna show a label whenever there are buttons inside of this span tag and if they aren't, I wanna hide said label.
<label id="label_sc">Search Criteria:</label>
So far my jquery is
function showSCLabel(){
if ($("#pill_filters").html.is(':empty')){
$("#label_sc").addClass("d-none");
}else{
$("#label_sc").removeClass("d-none");
}
}
But it doesnt seem to work. The label already has "d-none" class since the beginning and even with that, it is still showing. What am I doing wrong? is this not how the :empty state works? what can I use instead? I'll appreciate a lot your help!
if statement is missing ()
.html.is is invalid jQuery
Use:
if ( $("#pill_filters").is(':empty') ) {
Answer without jQuery:
//span
const span=document.getElementById("pill_filters");
//label
const label=document.getElementById("label-sc");
span.addEventListener('DOMSubtreeModified',function(){
//if innerHTML is not ""
if(span.innerHTML){
//show label
label.style.display="block";
}else{
//hide label
label.style.display="none";
};
};
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.
Currently on button click, I'm able to display the user input from inside the textbox, but it's displayed inside the same Div every time.
Textbox and the button (HTML file)-
<input type="text" name="inputText"><br>
<tr>
<input type="button" value="ADD" ng-click="$ctrl.addtext()">
</tr>
<div id="outputDiv"></div>
JS function-
ctrl.addtext = function () {
var div = document.getElementById('outputDiv');
div.innerHTML += newtext+"\n";
}
How can I get the user input in a different Div and a newline every time?
EDIT: A similar question has been asked for JQuery and it's JS is-
$('#submit').click(function() {
var text = $('#input').val();
$('#newDivs').append('<div>' + text + '</div>');
});
How can I do that append in Angular?
Got it to work using this in the JS function-
div.innerHTML += "<div>"+newtext+"</div>\n";
Instead of-
div.innerHTML += newtext+"\n";
Reference (solved for Jquery)-
Create/Display a new Div each time text is submitted by a user
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.