I'm trying to pass the non-standard autocapitalize attribute to a redux-form Field:
<Field
name="theName"
autocapitalize="none"
component={Input}
label="Name"
placeholder="name"
/>
But I can't see the attribute in the generated HTML.
Is there a way to pass extra attributes?
Thanks.
React props use the camelCase syntax.. so autocapitalize needs to be autoCapitalize.
Here's a list of all supported HTML props.
accept acceptCharset accessKey action allowFullScreen allowTransparency alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked cite classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload profile radioGroup readOnly rel
required reversed role rowSpan rows sandbox scope scoped scrolling seamless
selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step
style summary tabIndex target title type useMap value width wmode wrap
Related
Considering this (buggy until other questions are answered) demo from here:
https://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js
where the red < Text /> emulates a button that inserts a < CustomCardContainer /> based on the 2nd that I wish it could be editable and readable as an < input >, I would ask:
How can I emulate an input and read its value where a string in {rows}x{cols} format is expected?
Edit: I'm not closed on just a DOM < input >, I'm open to any HTML canvas way in react for a text to be entered and get its value. I just want get the string value.
Until now I hard-coded the value in line 86 with let inputValue = "10x2"; but would like to insert < CustomCardContainer /> of different sizes in order to achieve this result from here:
sectioned custom kanban board
https://konvajs.org/docs/sandbox/Editable_Text.html
"Konva has not support for such case. We recommend to edit the user input outside of your canvas with native DOM elements such as input or textarea."
you can use contenteditable attribute for the textarea.
const pseudoInput = document.getElementById('input');
pseudoInput.addEventListener('keyup', (e) => {
console.log(e.target.innerHTML.split('x'));
})
<div contenteditable id="input">10x20</div>
(I'm new to Svelte so it is quite likely that I'm doing something wrong here)
UPDATE: I've added a second, slightly different REPL which may demonstrate the problem better. Try this one: https://svelte.dev/repl/ad7a65894f8440ad9081102946472544?version=3.20.1
I've encountered a problem attempting to bind a text input to a reactive value.
I'm struggling to describe the problem in words, so hopefully a reduced demo of the issue in the attached REPL will make more sense.
https://svelte.dev/repl/6c8068ed4cc048919f71d87f9d020696?version=3.20.1
The demo contains two custom <Selector> components on a page.
The first component is passed two string values ("one" and "two"):
<Selector valueOne="one" valueTwo="two"/>
Clicking the buttons next to the input field sets selectedValue to one of these values.
This, in turn, triggers the following reactive declaration to update:
$: value = selectedValue
The input field is bound to this reactive value:
<input type="text" bind:value>
So clicking the "One" button sets the input text to "one", and clicking the "Two" button sets the input field to "two".
Importantly though, you can still type anything into the input field.
The second component is passed two array values:
<Selector valueOne={[1, "one"]} valueTwo={[2, "two"]}/>
Again, clicking the buttons sets selectedValue to one of these.
However this time the reactive declaration depends on an array element:
$: value = selectedValue[1]
Everything works as before, except now you can no longer type into the input field at all.
So the question is - why does <input bind:value> behave differently for these two:
$: value = aString
vs
$: value = anArray[x]
It seems that this is only an issue when using two-way bindings.
By switching to a one-way and an on:input handler, the problem goes away:
i.e. instead of this:
<input type="text" bind:value={valX}/>
use this:
<input type="text" value={valX} on:input={e => valX = e.target.value}/>
I'm pretty sure your reactive declaration is overwriting your bound value as soon as it changes, which is with every key stroke on the input and every button press. Meaning it technically is working, you're just reverting it each time it changes. Check out this version of it that uses a watcher.
Also binding to a reactive declaration means you're never actually changing the variables with the input (which you can see in your JSON result on the first selector when you type in the input the value doesn't update only on button click).
Why not lose the reactive declaration and bind directly to the variable you want. Then use an {#if} block to switch between which version of the input you're showing based on the truthiness of index?
<script>
export let valueOne;
export let valueTwo;
export let index;
let selectedValue = index? [] : '';
let selectValue = (val) => selectedValue = val;
</script>
{#if index}
<input type="text" bind:value={selectedValue[index]} placeholder="Type anything...">
{:else}
<input type="text" bind:value={selectedValue} placeholder="Type anything...">
{/if}
<button on:click={() => selectValue(valueOne)}>One</button>
<button on:click={() => selectValue(valueTwo)}>Two</button>
<p>
<strong>Selected value:</strong> {JSON.stringify(selectedValue)}
</p>
By binding directly to the selectedValue or an index of it you have the added benefit of changing the value with the input. Here's a working example in the REPL
I have used the uib-typeahead directive as follows :
<input type="text" id="search-box" class="form-control" data-ng-model="searchBar.search.searchString"
typeahead-on-select="searchBar.gotoPartDetails($item, $model, $label, $event)" uib-typeahead="result as result.partNumber+' '+result.lineDesc+' '+result.partDesc for result in searchBar.textTyped($viewValue)"
placeholder="Search by part number, product type, product line, keyword" typeahead-focus-first="searchBar.search.firstSelect" typeahead-popup-template-url="app/components/header/search-bar/typeahead-popup.html" typeahead-template-url="{{searchBar.search.typeaheadTemplate}}"
data-ng-focus="searchBar.focus()" data-ng-blur="searchBar.blur()">
I am basically using the "searchBar.search.firstSelect" scope variable to enable or disable first select. On controller load searchBar.search.firstSelect is set to false and based on the size of the length data displayed. If the typeahead is showing just one data in the options I am setting searchBar.search.firstSelect to true. But this is not reflecting in the UI. What do I do?
I need way to display a "List" property with the option to add new elements to the list.
So Basically
Value 1
Value 2
Button: Add new
I created an editfor template for it, where I display all the values with a foreach loop. However, each item get's an index, so when I add a new input field with javascript, the index is wrong.
Any suggestions how to achieve this.
PS: the adding of new elemens mustbe done on the client, since it is a simple form
var abccounter = 1;
$("#abcbutton").click(function () {
$('#itemlist').append('<p><input class="text-box single-line" id="listofstringname_' + abccounter + '_" name="listofstringname[' + abccounter + ']" type="text" value=""></p>');
abccounter++;
});
<p>#Html.EditorFor(model => model.listofstringname)</p>
that is what I did and it worked. the only problem I'm having (and it may be solved eventually) is I want to wrap each element with a tag but I'm not sure how. this JS just adds a new "text box element" assuming 1 as the start as my model loads 1 example by default.
my function look like this:
void write (String message) {
query("#status").innerHTML = message;
query("#head").text = "Click me!";
}
all of them catch id and show text to web browser.
In general browser document model, innerHtml refers to all the internal HTML, whereas text just refers to the text values of the elements. innerHtml is often used by dhtml and Ajax to change a div, where text would be just to set the text value of a single element.
This is more explicitly illustrated when getting, rather than setting, i.e.
e.g. Given:
<div id="idName">
Text in the Div
<p id="anotherId">Inner P</p>
</div>
innerHtml returns
Text in the Div
<p id="anotherId">Inner P</p>
text returns :
Text in the Div
Inner P
If you try this:
String message = """<form method="get" action="#ref"><input name="first_name"/></p><input type="submit" value="Send"/></form>""";
write (message);
then you will appreciate the difference.
The innerHTML should operate an injection of code (an html form in the example) into the HTML page.