Background
I have a basic CRUD form/webapp. It happens to be react/redux but for our purposes it doesn't matter much. I'm pretty sure this is an HTML question.
The form itself represents a 'legal document' a bit, and multiple users log in to view/edit it at once. (think kinda google docs ish)
Some users can only view, some can edit.
The Problem
I want my edit users to be able to use the form elements (input/select etc) to modify the data, and my view users to see that same data as similarly as possible.
I want my view users to be able to copy and paste from the screen.
The disabled and readOnly flags won't quite work.
Failed Solutions
Disabled: With a little CSS magic is looks perfect, and the view users don't get onclick reactions they shouldn't. BUT you can't copy and paste the text. This is the current state of the app.
ReadOnly: Isn't supported by many of the inputs I have (select, radio, etc) although it's pretty much perfect for text and texarea.
The Question
Is there a reasonable or elegant way to achieve behaviour like ReadOnly but across all HTML elements?
Clarifications
Since the current view of the page is exactly what I want my view users to see (it's made to look like a paper form a little) If I chose to use 'view mode' spans for my components or a 'view page' mode I would end up having a to make them look as much like my current inputs as possible. It feels weird/bad to try and make a precise recreation of what I have out of spans and divs instead of making what I have behave correctly. Still... it's the backup plan.
We are using all kinds of inputs. Selects and dates and checkboxes oh my. Text and Texarea are well behaved, but the rest get less well behaved.
Readonly propperty is only supported by input and textarea, check caniuse.
As it has been said in a comment, replace input elements by others that don't allow insert data and re-style the elements to look similar if that's what you want.
Related
I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.
The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.
I am using dijit.form.Select as a replacement for the HTML SELECT.
I am unable to get it to allow me to select an item purely by typing as you can with the HTML version. Ie, if you have a list of US states you can hit C several times to select Conneticut. What am I missing? TIA
And yet, it works on the web page below....
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test%5FSelect.html
When designing a select element that is visually consistent with a UI theme, CSS is often not powerful enough to completely control the look of select element, as some browsers treat CSS stylings on a select element differently. So the next best thing for many is to develop a faux-select with javascript so that way you have a better looking select element.
What you're left with is something that looks like a select element, but isn't, and the real select is hidden nearby, typically.
That means that there is a good possibility that when the developer was making that javascript version of the select element, they didn't do their diligence to at least program the minimum features that come native with the HTML version. (after all, it would be a lot of work to do string searching and sorting on a keyup event... and i'm not surprised they didn't do it)
to add insult to injury, sometimes the plugin actually allows for the change event on the native select to still be focused beneath the surface, which is why your typing works sometimes.
A chap named Bob Tarling has solved my problem. Much obliged Bob!!
See this link for his solution http://dojo-toolkit.33424.n3.nabble.com/Sharing-a-solution-for-type-ahead-in-Select-and-help-request-to-adapt-tt3995899.html#none
In GAE it's easy to set up an HTML page with 1 (or any other predefined number) of text input fields and then deal with the data you get. My question is how is it possible for a user to start with 1 text box, and using a button (like "Add more") to add any number of additional boxes he wants.
I'm not sure both about the HTML implementation of this (I think it'll require JS, but I'm pretty much a noob with these stuff), and the GAE implementation of this (How to write code that'll accept an arbitrary number of inputs?)
An answer to either would be very welcome; perhaps the GAE problem is not even a problem. It'll be easier for me to ponder on once I get the html/js part right.
The Answer depends on what size of information you expect. One option is an Expando Class where you add to it as needed.
Or the easier to implement if your input is small enough you probably can get away with a db.StringListProperty and use object.append(var) to add more fields in the post.
You will certainly need to use JavaScript to create the additional text boxes. Then loop through the submission in the post to add the data to either option.
my site page's goal is to get information from a fairly complex (but concise) form. Ease of use is a big deal for me so when I tested the form on a WAP emulator, I was disappointed to see nothing happen when I clicked on radio buttons that successfully display the correct portion of the form on normal browsers, including the iPhone's. I've realized that this is because the code in the page is javascript and most dumb WAP phones don't support it. When I implement javascript, it's so that form options below a radio button don't show up until they are selected, and I know what you're thinking - "just make default forms options pop up" - but I couldn't figure out how to do that without ruining the whole appearing/disappearing act.
I suppose I could ask the browser if it supports javascript and redirect it to the javascript-enabled page if it does, or one without dynamic stuff if it doesn't... I wish there was a better option but how would I do that? BIG thanks in advance!
you could either use <noscript> to display the whole form on "dumb phones" or you could make some "config wizard"-like thing, like showing the radiobuttons on one page, submit it, and then (using php/ASP/whatever) send only the fields that depend on the previously checked options.
I'm trying to build something similar to Facebook's privacy selection menu, except without the 'custom' option. It will only list a few options such as 'show to all', 'show to friends only', or 'completely hidden'. Right now I'm thinking of using simple JavaScript to change a hidden input field to the new value they click on, so if they clicked on the division for 'show to friends only' it would change the corresponding field, say 'email_privacy', to 1. Is there a better way to do this or am I pretty much on track?
P.S. I am not planning on using a select element, I was planning on building a custom drop-down menu using CSS since select elements are so highly non-customizable. I'm doing it this way to save space, rather than having this massive selection menu at the right which takes up a bunch of space.
Note: I'm not really interested in using jQuery, that's just extra libraries and crap that I don't want to load. I can do it in JavaScript just as easily so I might as well use that.
It sounds like you're on the right track. If you're planing on doing a POST when the user clicks the submit button containing (amongst other things) the privacy value, then you'll need to pack it in the POST data somehow, and a hidden field is a way to do it.
Alternatively if you were interested in making use of jQuery (which I know you said you weren't but just putting it out there) you can perform asynchronous POST requests passing along with it arbitrary data, such as in this instance the privacy setting, without needing to 'copy' it into a hidden field.
Both options work just fine though.