I am trying to wrap an input field inside a custom element.
The custom element DOM looks like this:
<custom-element>
<div class="fancy-wrapper">
<input value="4">
</div>
<custom-element>
While the element should work like this:
<custom-input id="test"></custom-input>
<script>
let test = document.getElementById('test')
console.log(test.value); // should return 4 (value of inner input)
test.onkeydown = function(e){
console.log(e.target.value); // should the new value of the inner input
};
</script>
Is there any way to get the <custom-input> attributes redirected to the <input> attributes inside it, without connecting everything by hand?
No, it is no different than having one DIV and another child DIV
You have to make the connection between the CustomElement and content yourself.
One way is to define a Get/Set function on your Custom-Element that fetches the value of a child input
Instead of manually declaring Get/Set You can ofcourse loop any child element and assign on the CustomElement with defineProperty or Proxies
Example below creates 2 INPUT fields and a this.input array:
<number-and-range>
<input type="number"> // this.input[0]
<input type="range"> // this.input[1]
</number-and-range>
And connects (GET/SET) <number-and.range>.value to this.input[0]
customElements.define('number-and-range', class extends HTMLElement {
get value() {
return this.input[0].value;
}
set value(val) {
//input validation should go here
this.input[0].value = val;
console.clear();
console.log('new value:',val);
}
connectedCallback() {
this.input = ['number', 'range'] //create [0] and [1] values in array
.map((type, idx) => Object.assign(
this.appendChild(document.createElement('input')), {
type,
min: 20,
max: 50,
oninput: _ => this.value = this.input[~~!idx].value = this.input[idx].value //toggle [0] and [1]
}));
this.value = 42;//default value
}
});
let el=document.querySelector('number-and-range');
console.log(el.value);
el.value=99;
<body>
<h3>Custom Element : Connected INPUT and Range slider</h3>
Please enter a number between 20 and 50, or use the range slider
<p>
<number-and-range></number-and-range>
</p>
</body>
If I understood your question, you want to copy all the attributes of the custom-element to the input tag.
What you can do is,
//get all attributes of custom element
var el = document.getElementById ('test');
// get all attributes
var attrs = el.getAttributeNames(); // returns an array
// loop over attrs array and append the attribute and value in the input,
// I am assuming, you will not add copy id attribute here.
var input = el.getElementsByTagName ('input')[0];
for (var index = 0; index < attrs.length; index++) {
if (attrs[index] !== 'id') {
// set attribute of input with attribute name from the array,
// and get the value from from input.
input.setAttribute (attrs[index], el.getAttribute (attrs[index]));
}
}
It's an idea, you can do something else.
HTML:
<custom-element id="test">
<div><input value="43" /></div>
</custom-element>
JavaScript:
class CustomElement extends HTMLElement {
constructor() {
super();
const currentDocument = document.currentScript.ownerDocument;
this.template = currentDocument.querySelector('input');
}
get value() {
return this.template.getAttribute('value');
}
set onkeydown(cb) {
return this.template.addEventListener('keydown', cb);
}
}
window.customElements.define('custom-element', CustomElement);
let test = document.getElementById('test');
console.log(test.value);
test.onkeydown = function(e) {
console.log(e.target.value);
};
Can take a look at demo
You can append to the innerHTML of the custom element tag
var string="<input type='text' ";
document.getElementById('test').onclick = function(e){
var attr=[...document.querySelector('#test').attributes].map(attr => attr.nodeName);
attr.forEach((e)=>{
var val=document.getElementById('test').getAttribute(e);
string+=e+"="+val + " ";
})
document.getElementById("test").innerHTML+=string + '//>' ;
console.log(document.getElementById("test").outerHTML)
};
<custom-input id="test">dd</custom-input>
Related
I have some conditional renders of textarea elements in many places on a form that shows/hides these elements depending on what the user is doing. For example:
<li v-if="Form.Type === 1">
<textarea v-model="Form.Title" ref="RefTitle"></textarea>
</li>
There could be any number of textarea elements like above. What I need to do is resize these elements at certain points in the lifecycle (e.g. onMounted, onUpdated).
The function that gets triggered to do this is:
setup() {
...
const RefTitle = ref(); // This is the ref element in the template
function autosizeTextarea() {
RefTitle.value.style.height = "35px"; // Default if value is empty
RefTitle.value.style.height = `${RefTitle.value.scrollHeight}px`;
}
...
}
In the code above I am specifically targeting a known textarea by its ref value of RefTitle. I could test for its existence using an if(RefTitle.value) statement.
But how could I get all the textarea elements that may be rendered and then run autosizeTextarea on all of them?
I can get all the textarea elements like such:
setup() {
...
function autosizeTextarea() {
const AllTextareas = document.getElementsByTagName('TEXTAREA');
for (let i=0; i < AllTextareas.length; i++) {
// How can I set the style.height = `${RefTitle.value.scrollHeight}px`;
// in here for each element?
}
}
...
}
But how can style.height be set on all of them?
You could create your own custom component representing a textarea with the functionality in the component itself, so you don't have to get all textareas which are dynamically created.
It could look something like this:
<template>
<textarea :value="modelValue" #input="$emit('update:modelValue', $event.target.value)" ref="textarea" :style="styleObject"></textarea>
</template>
<script>
export default {
emits: {
'update:modelValue': null,
},
props: {
modelValue: {
type: String,
},
// Prop for dynamic styling
defaultHeight: {
type: Number,
required: false,
default: 35,
validator(val) {
// Custom Validator to ensure that there are no crazy values
return val > 10 && val < 100;
}
},
computed: {
styleObject() {
return {
height: this.$refs['textarea'].value.scrollHeight ? `${this.$refs['textarea'].value.scrollHeight}px` : `${this.defaultHeight}px`,
}
},
</script>
That way you can even use v-model on it.
<li v-if="Form.Type === 1">
<custom-textarea v-model="Form.Title" :defaultHeight="45"></textarea>
</li>
The Template I provided is just to show you how a custom component could look like. You might have to fit it into your logic depending on when you actually want things to change/trigger.
I have managed to do it like this:
const AllTextareas = ref(document.getElementsByTagName("TEXTAREA")); //returns an object not an array
for (const [key, value] of Object.entries(AllTextareas.value)) {
AllTextareas.value[key].style.height = AllTextareas.value[key].scrollHeight ? `${AllTextareas.value[key].scrollHeight}px` : "35px";
}
I was trying to test a few novice tricks from a project tutorial. Wanted to create a small scale task app and ran into a weird problem. The last document.addEventListener below should theoretically call the closest element with the class name of ".name" should be detected since its in the same parent div with the button. However it is returning NULL. Am I applying the .closest() method wrong?
The event listener detects the button after everytime a task is created. Not sure why it returns NULL when, after creating the task via addTaskButton, the task with the class name of ".name". I even tried to create a data attribute id based off of the taskName itself to see if it'll detect, but still NULL / erroring.
const list = []
const container = document.querySelector('.container');
const itemContainer = document.querySelector('.item');
const addTaskButton = document.querySelector('.add-task');
const taskInput = document.querySelector('#task-name');
function renderTasks(){
itemContainer.innerHTML = ''
list.forEach(task => {
const itemElement = document.createElement('div')
itemElement.innerHTML = `
<div class="name">
${task.taskName}
</div>
<button class="retrieval">Retrieve ID</button>
`
itemElement.dataset.itemName = task.taskName
itemContainer.appendChild(itemElement);
})
}
addTaskButton.addEventListener('click', (e)=>{
e.preventDefault();
list.push({ taskName: taskInput.value})
renderTasks()
})
document.addEventListener('click', (e)=>{
if(e.target.matches('.retrieval')){
const taskName = e.target.closest('.name');
console.log(taskName)
}
})
Ok, I double checked the mdn article it says:
closestElement is the Element which is the closest ancestor of the
selected element. It may be null.
That means it only looks for parents and parents of parents and so on, not 'siblings'.
In my code i have two grid on for base layer other for utility layer .
Base layer has radio button and on clicking the logic used is working
{
var baseLayerGroup= new ol.layer.Group({
layers:[
openstreetmapstandard,openstreetmaphumanitarian
]
})
map.addLayer(baseLayerGroup);
//Layer Switcher Logic for Baselayer
var baseLayerElements = document.querySelectorAll('.sidebar1 > input[type=radio]');
for(let baseLayerElement of baseLayerElements){
baseLayerElement.addEventListener('change',function(){
let baseLayerElementValue = this.value;
baseLayerGroup.getLayers().forEach(function(element, index, array){
let baseLayerTitle = element.get('title');
element.setVisible(baseLayerTitle === baseLayerElementValue);
})
})
}
var dataLayerGroup= new ol.layer.Group({
layers:[
Sector_office,Roads
]
})
and my logic for checkbox is :
Sector_office.setVisible(true);
Roads.setVisible(false);
var toggleLayer = function(inputEl){
map.getLayers().forEach(function(layer){
if (layer.get('name') === inputEl.name)
layer.setVisible(inputEl.checked);
});
};
map.addLayer(dataLayerGroup);
but my checkbox logic is not working and here is my html page for it
<input type="checkbox" onClick="toggleLayer(this);" value="Sector_office" checked>Sector office<br>
<input type="checkbox" onClick="toggleLayer(this);" value="Roads" checked>Roads<br>
</div>
For what I see you have a couple of issues in your code.
In the handler function you are referencing the name attribute of the dom element, but I see not such attribute in the html. That will always result false. So you have to set the name attribute or use the value attribute.
The onclick event handler receive as a parameter a MouseEvent argument. To get a reference of the dom element inside the handler you can use this or you can use the event argument attribute target.
Resuming,
handler
const toggleLayer = function(e){
const chk = e.target.
map.getLayers().forEach(function(layer){
if (layer.get('name') === chk.value)
layer.setVisible(chk.checked);
});
};
html
<input type="checkbox" onclick="toggleLayer(event)"
value="Sector_office" checked>Sector office<br>
<input type="checkbox" onclick="toggleLayer(event)"
value="Roads" checked>Roads<br>
I'm using react-select in my project and I'm using it within a map like that:
renderItems() {
this.props.items.map(item => (
<Select
id="options"
value={this.state.optionSelected}
onChange={this.onChangeOption}
options={this.showOptions()}
/>
);
}
It show correctly all my options for all my items but now I can not get rid about the select...
Basically when I select an option on a single item, that option is changing for all items...
This is what i did so far:
onChangeOption(e) {
this.setState({ optionSelected: e.value });
}
How can I adjust it to change the option only on the one I wish to change it?
Thanks
You are using the same change handler for all of your select components and then set the same state value for all your select components. To deal with this either you need to separate your select components with a container component that handles their own state and change event or you need to give each select component a unique state value.
Example
renderItems() {
this.props.items.map(item => (
<Select
id="options"
value={this.state.optionSelected[item.id]}
onChange={(event) => this.onChangeOption(event, item.id)}
options={this.showOptions()}
/>
);
}
onChangeOption(event, itemId) {
this.setState((prevState) => {
const prevStateClone = Object.assign({}, prevState);
prevStateClone.optionSelected[itemId] = event.target.value;
return prevStateClone;
});
}
Instead of making optionSelected string variable, make it as array in state.
Now do the following.
renderItems() {
this.props.items.map(item, index => (
<Select
id="options"
value={this.state.optionSelected[index]}
onChange={(selectedValue) => this.onChangeOption(selectedValue, index)}
options={this.showOptions()}
/>
);
}
onChangeOption(selectedValue, index) {
const optionSelected = this.state.optionSelected.slice() // slicing to get new copy of optionSelected instead of referencing to old one which causes mutation
optionSelected[index] = selectedValue
this.setState({optionSelected: optionSelected})
}
What you were doing is using a single variable to hold values of the select box. So if anyone changes, it will reflect all select box
Try cloning the object to a new object or if this optionSelected is a class, you can implement a constructor that clones it for your like:
export class optionSelectedClass {
myfield = '';
constructor(fields){
this.myField = fields.myField;
}
}
or even
export class optionSelectedClass {
myfield = '';
constructor(fields){
for (let f in fields) {
if (!this[f]) {
this[f] = fields[f];
}
}
}
}
How can I set focus on an input by (click) event? I have this function in place but I'm clearly missing something (angular newbie here)
sTbState: string = 'invisible';
private element: ElementRef;
toggleSt() {
this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
if (this.sTbState === 'visible') {
(this.element.nativeElement).find('#mobileSearch').focus();
}
}
You can use the #ViewChild decorator for this. Documentation is at https://angular.io/api/core/ViewChild.
Here's a working plnkr: http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F
This gist of the code comes down to, giving a name to your input element and wiring up a click event in your template.
<input #myInput />
<button (click)="focusInput()">Click</button>
In your component, implement #ViewChild or #ViewChildren to search for the element(s), then implement the click handler to perform the function you need.
export class App implements AfterViewInit {
#ViewChild("myInput") inputEl: ElementRef;
focusInput() {
this.inputEl.nativeElement.focus()
}
Now, click on the button and then the blinking caret will appear inside the input field. Use of ElementRef is not recommended as a security risk,
like XSS attacks (https://angular.io/api/core/ElementRef) and because it results in less-portable components.
Also beware that, the inputEl variable will be first available, when ngAfterViewInit event fires.
Get input element as native elements in ts file.
//HTML CODE
<input #focusTrg />
<button (click)="onSetFocus()">Set Focus</button>
//TS CODE
#ViewChild("focusTrg") trgFocusEl: ElementRef;
onSetFocus() {
setTimeout(()=>{
this.trgFocusEl.nativeElement.focus();
},100);
}
we need to put this.trgFocusEl.nativeElement.focus(); in setTimeout() then it'll work fine otherwise it will throw undefined error.
try this :
in you HTML file:
<button type="button" (click)="toggleSt($event, toFocus)">Focus</button>
<!-- Input to focus -->
<input #toFocus>
in your ts File :
sTbState: string = 'invisible';
toggleSt(e, el) {
this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
if (this.sTbState === 'visible') {
el.focus();
}
}
try this.
//on .html file
<button (click)=keyDownFunction($event)>click me</button>
// on .ts file
// navigate to form elements automatically.
keyDownFunction(event) {
// specify the range of elements to navigate
let maxElement = 4;
if (event.keyCode === 13) {
// specify first the parent of container of elements
let container = document.getElementsByClassName("myForm")[0];
// get the last index from the current element.
let lastIndex = event.srcElement.tabIndex ;
for (let i=0; i<maxElement; i++) {
// element name must not equal to itself during loop.
if (container[i].id !== event.srcElement.id &&
lastIndex < i) {
lastIndex = i;
const tmp = document.getElementById(container[i].id);
(tmp as HTMLInputElement).select();
tmp.focus();
event.preventDefault();
return true;
}
}
}
}