I am trying to create a new html component using javascript and CSS.
The new component is exactly like TextField (<input type="text">).
The additional behaviour is each character in the TextField is separated in a box.
Is there any existing component available ? If not please give some ideas how to design this component.
Nothing exists in HTML for a multiple text input like you've described.
You'll need to build it yourself using multiple <input type="text"/> elements.
TextField(<input type="text"/><input type="text"/><input type="text"/>...)
Just out of interest though, why do you want this control? Typically this kind of field is horrible from a usability standpoint (even if you hook in event handlers to auto-tab you from one box to the next)
If you just want it to look like the characters are in boxes, you might be able to use a fixed-width font and a clever background graphic. Admittedly, this could pose some interesting internationalization challenges.
i would use a series of input boxes with a character limit of 1 and use CSS to make them 'square-like' to accomodate just one character
Related
So I am trying to make an interaction which is similar to the file browser in VSCode. I display a list of items, and click on an item to select it. I want to then be able to press enter when an item is selected to make that item editable.
My first attempt was to use the contentEditable property, as it seemed the easy way to turn editing on and off on my div:
...
render(
<div
contentEditable={this.state.isEditable}>
{this.state.text}
</div>
)
But when I use this method, I get this warning:
[Error] Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.
If I understand correctly, contentEditable is breaking the convention of React, and this may cause issues if I use this method.
As I have read more about contentEditable in general, I have also seen that there are some issues with the HTML generated inside being inconsistent across different browsers.
So my question is, what would be the standard/best practice to achieve something like this where I want to swap between a display-only element and an input element? Should I use an input tag instead and disable it instead of enabling it?
You can consider using input's native attributes, readonly/disabled, depends on your use-case, for example:
<input readOnly={!this.state.isEditable}/>
contenteditable will give you HTML, but you're not using this.state.text as HTML (just text), and as you've noted the HTML varies from browser to browser. I'd swap a styled input for the div:
return this.state.isEditable
? <input className="styling-class" type="text" value={this.state.text} />
: <div>{this.state.text}</div>
;
Helo there!
I'm trying to figure out a simple way of doing multiline placeholders inside a textarea (or an alternative solution, more about that in the bottom) that only disappears when the row have changes. So, basically, if this is the initial state of the textarea (or whatever it can be)
Write a question here
Write another question here
Write the third question here
And the user clicks the first question and types A it would look like this:
A
Write another question here
Write the third question here
I've thought about three different solutions so far but not sure which one to prefer.
1) Have ghost content that is rendered separately from the area of text.
2) Instead of using a textarea, have one input per line that the textarea would be. Problem would be to implement textarea behavior but with many inputs instead. Having placeholders per line would be trivial though.
3) Have actual text and use a parser of some kind to add/remove text whenever that is needed.
Appreciate any help/pointers I can get.
I'm using React and Redux but I'm happy to get answers that are including other technologies that I can take inspiration from.
I have to use a special form for work and the form has a comment section that is WAY too small (about 5 lines for 30+ lines of text) Since the developers don't update the software very often, I usually take the initiative to create bookmarklets that do what I want.
I'm trying to create a javascript line that extends the size of the textbox. I am taking this approach but it does not work:
javascript:document.getElementById("CommentArea").style.height="700px";
Form name is "Survey" if that helps.
Any ideas?
(Note: I'm trying to change the visual size, not the character limit.)
Textareas use the rows attribute to determine the number of visible text lines for the control:
document.getElementById("test").rows = 20;
EXAMPLE
I have an HTML form with two input textfields.
When the user tabs from the first field to the second, I'd like to automatically switch the user's input method to a different one, say for a different language.
The reason I'm trying to do this is that I expect the user to type content in known different languages in each field.
I tried <input lang="JA" /> but that didn't seem to change the input method on Safari for Mac nor iOS.
Is it possible in HTML or JavaScript to change the input method on a per-textfield basis?
Input methods are controlled by the browser and the user. The lang attribute does not affect this, and there is no other HTML way either. It would not be useful to change the input method on a per-document, still less per-field basis, from the method normally used in the browser and accepted by the user (either silently or by finding out how to control such things).
In some situations, it can be helpful to provide special tools to users—not to override input methods but to offer additional possibilities. For example, if the expected language is written in Latin letters with a few extra letters in addition to the basic a–z, you could have buttons for entering them (to help people using keyboards that have no convenient way to type them).
It is possible to build controls that act as input method editors, see e.g. typd.in for entering Japanese. But this means using something on top of the input methods that the user is using.
I have a text box on a page with auto complete/suggest functionality. The problem is that it is on Arabic and once the format of the word changes, it does not suggest correct matching phrases. For example if I type "ل" in the text box, it will suggest all the words with "ل" in its single form but it will not suggest words/phrases where "ل" is present in one of the joining forms (for example it will not suggest "لاهور").
The standard autocomplete uses substring which isn't useful for languages where a character can change when used in some context (like in Arabic).
I'm not aware of a web framework that handles this case.
You will need to write your own autocomplete code.