I am trying to do a type of calculator that calculates the Body Mass Index of a person. It works real nice if I input the actual value (I use jQuery to make the calculus).
What I want to do though, is that instead of typing the value, the user to be able to write it from the numbers buttons, so it works like a calculator.
The problem I have is that I can't find how to know if an html input is selected. This is necessary since I will use the same "keyboard" for two different inputs (One to enter weight and another one for height).
I put below an image of how it works. Same keyboard for two different inputs.
Problem:
I think you are complicating the issue by attempting to use the same keyboard for two inputs. If you want to achieve your goal in this manner, you will need to:
add event listener to each input ('click' event)
change how the keyboard behave depending on which input is selected (heavy work!)
Solution:
Prepare a keyboard for each input.(two keyboards in total) That way, you only have to:
display the keyboard for the input selected
You can either use CSS selector or JavaScript to handle displaying the appropriate keyboard. I think it is so much simpler than using 'the same keyboard'.
Related
With HTML/JS, I'd love to create a UI control for tweaking numbers.
Requirements
I'd love to support a coarse-vs.-fine scheme, i.e., reuse the space of a range control for a number input, so that workflow for tweaking a number would look like this:
Drag the slider to enter the rough zone;
Double-click the slider and see the input control in place while the range turns invisible;
Enter the accurate number;
Press Escape on keyboard and see the range control again, and the input becomes invisible.
Would this be possible? If so, I need some pointers how to do this. Would it be an overlay or remove/add/refresh cycles? I honestly have no idea how.
This should be possible by setting the value of the range control directly.
It could be as simple as listening for mouse events on the slider, hooking into one of these, showing a modal that has one input prefilled to the existing value on the slider, allowing the user to change the value directly.
Upon 'submitting' this modal update the value of the slider i.e document.getElementById("slider").value = 123;
I have been given a task, which up to this point I think might be impossible. I am wondering if it is at all possible to override a default system keyboard for input in a text input area (on mobile devices).
Assume the OS is Android. Is there a way for a mobile website to not show the default system keyboard when clicking on a text input area? I know a little bit about programming, so I know this is possible with Java inside of an app, but that's beyond the scope of this particular issue.
I.E., say you have a numeric input field on a website. Can you instead use some form of Javascript (like onFocus, onBlur, etc.) or media queries to display a custom pop-up keypad for data entry and somehow tell the device not to display it's default text entry method?
There are a few other issues I've read regarding a jQuery datepicker where it is possible to hide the keyboard by making the element read-only or similar, but the problem is that my element still needs to be able to accept an input.
The only other similar issue I've found is here. Alas, it also has no answer.
For what it's worth, this task is math-related, where the pop-up keypad entry will provide limited answer entry possibilities that pertain only to the question, whereas a full keyboard is not needed and often overkill for the task at hand.
EDIT: also, forcing a pure numeric input keyboard is not an acceptable solution, since the input (in some cases) will require fraction bars and/or variables, such as x and y.
You can mark your input field read only in modern browsers, e.g.
<input name="TextBox1" type="text" id="TextBox1" readonly="readonly" />
You can set a focus and cursor, but not edit this input (no default menu will popup).
Now you can built your custom keyboard and use js to set the corresponding value.
Sounds quite easy, but it's not- you have to make sure the input field stays visible during input and therefor maybe have to rethink your page layout.
We're looking for a certain type of control, preferably with a Bootstrap implementation. We don't believe it's really uncommon, but we might be wrong.
It's essentially a listbox, but also:
It's like an editable combobox, but without a dropdown.
Like a tag input/pillbox, but vertical, with a more traditional style, and directly editable.
Like an expanding grid, but with a single column.
Like a series of vertically attached text input field boxes, on steroids.
Like a text area, but properly structured and expanding.
The ultimate goal is to be able to quickly and efficiently input a bunch of values (phone numbers, ...) without leaving the keyboard, while allowing the user to edit or remove existing values painlessly. (The form is relatively large and part of a LOB application.)
Does this control have a name?
Does anyone know of a Bootstrap plugin that provides such a control?
If not, then we're not exactly sure about how to proceed, would you have any pointers for us so that we can implement this in a straightforward way? (Is it a good idea to start with a series of text input fields for example?)
Details:
It's essentially a list,
It starts as something that looks very much like a simple text input field,
When the user presses ENTER, a new row is added below and the cursor is moved to it (the list expands dynamically),
When the user presses TAB, the cursor is moved to the next control,
(Optional) When the user presses the UP or DOWN arrow key, the cursor jumps in the previous or next element, respectively,
Each row is directly editable (the user can click inside any of them and change any character, even in the middle, thus without deleting the element first),
(Optional) There can only be one empty row at the end,
(Optional) If the user focuses another control (for example by pressing TAB) or another element (for example by using the arrow keys or by clicking), the current element is removed if it's empty,
(Optional) In addition to pressing ENTER when the cursor is in the last field, the user can press a button to add a new empty element if the last element is not empty,
There is only one column (no need for a column header),
(Optional) An inline label should be displayed in the last element if it's empty,
There is a button next to each element that allows the user to remove them,
(Optional) When the user presses DELETE twice at the end of an element, the focused element is removed (it must be pressed twice so that a user who keeps the button pressed to delete a bunch of characters doesn't remove the element by accident if that wasn't her intention -- this requirement can be formulated in other ways),
(Optional) The user can undo a delete operation,
(Optional) If the number of elements exceeds a certain limit, a scroll bar appears and the height of the control is fixed at that limit,
(NTH) If the number of elements exceeds a second (normally higher) limit, the list is paginated.
As I don't know any control that suits your needs, I'll try to suggest some implementation options:
Contenteditable:
Take a look at the contenteditable attribute - demo here.
This won't match all your requirements (point 12 is the main blocker here), but it's pretty nice OOTB, and (according to MDN) cross-browser.
The demo provided above may be a good starting point for your own solution.
One input per line:
The other approach will be to use one input for each of the lines.
I've provided simple demo that adds "new line" as enter is pressed.
Although this implementation will also need a bit of boxing with keyboard events, this one-element-per-line model seems to better reflect your bussiness needs and is pretty flexible.
I'd be afraid about performance with bigger data sets, though.
This can be also mixed with contenteditable approach (e.g. list of editable <li> elements), but it doesn't seem to bring in any benefits. It even brings some problem, because contenteditable won't restrict number of lines by default; with regular input, you have a guarantee that one element contains one line.
I am wondering what the best practice would be for the following project.
I am going to use JQuery to make a drag-and-drop quiz feature. At the end of the quiz, when the submit button is pressed, I want to total the number of correct boxes dropped over correct answers. This means that not all boxes will have been dropped.
I was considering using Javascript classes to instantiate objects (boxes, in this case) and count up through all the objects that had a "droppedTrue" value set to true, for example. Or I guess I could somehow set a property in the javascript of each of the boxes (probably divs) so when the submit button was pressed it would go through all the boxes with a certain marker?
I guess my question boils down to how do I set some type of marker for the divs that have actually been dropped on the correct boxes?
Ok here it is. I wasn't sure which scenario you mean for the two guesses restriction (whether on the answer or the question). I put it on the answer but you should be able to flip it around pretty easily.
DEMO
i know <textarea name="textarea" disabled="disabled">dsds</textarea> can disable write in the textarea ,
but how to disable one line i want to disable in the textarea ?
not all line
thanks
That's not possible without JavaScript, even then:
You need to enable contentEditable
You need to write your own editor...
You need to figure out what happens if someone deletes or inserts a line and therefore moves the disable one around
You need to figure out what to do when someone hits enter in the line above the disabled one or backspace at the beginning of the line below the disabled one...
To sum it up, a textarea is the wrong approach here, better use multiple input's for whatever you want to do here, of course you will need to make it look like it's one textarea and you'll still need some JavaScript to make return work as expected (?), but then again you didn't specify what you want to do with this stuff.
Yes, use multiple input texts appear like a single text area, let's call it fake text area. That way disabling one would be easy.
Do not put any margin in between them and no border, all having same width.
Assign incremental ids to each one - like input-1,input-2 etc.
If you want to prefill some text into the fake textarea, calculate the maximum length that can be accomodated into a single input and fill line by line using javascript (jquery would be better).
When cursor is at the end of an input text and enter is pressed, take cursor to next text input. Define a function for every such possibility and call it.
On posting the form, append the input values together to get the actual value of the faked text area.
I guess there may be difficulties in faking a scrollbar for such a textarea but once implemented, should work fine. Any existing plugins like this?
Updates
- For handling cursor positions, refer these things. I did not try myself but may be useful - Jquery Caret position and How to get cursor position in textarea and you can apply the cursor position getting-setting logics. Somehow try to get the actual click position and force the cursor to stay there.