jQuery / Javascript > onClick place text at last known cursor position - javascript

I have a form I'm working with that allows the user to continually add new rows as needed (used for making an article with multiple "howto" steps, they can click over and over again to add a new step). What I would like to be able to do is have the user be able to click in any of those rows at any time and then click on a word or button that is off to the side that will then insert the value of that button into the last known cursor position.
So for example I may have one form that currently has 3 rows. If the user goes back and wants to insert some data they could click back in the box and hit the button corresponding to the data they want to insert.
Example input 1: "Remove the customers current IP address and replace with their static IP, [USER COULD CLICK HERE AND THEN CLICK THE STATIC IP BUTTON AND %STATIC_IP% WOULD BE INSERTED AT THE LAST KNOWN CURSOR POSITION (AKA HERE)]
Example input 2: "Enter in the customers [Click to insert %WIFI_SSID%] into the router settings"
I have found several other stackoverflow articles that are able to all insert text but they all expect it to be into a defined textarea or input. In this case I'm needing it to insert into the last known cursor position. I hope this is all clear. I look forward to any assistance or questions.
Starter code: http://jsfiddle.net/4mJwU/

If you already know how to insert some arbitrary content at the last known caret position, your only problem is to know which field was focues last time before button was clicked.
That can be done in numerous number of ways, one of those would be utilize focus and blur events (attached to fields - rows in your case) to track (in some variable for example) reference to the field last focused. It should be a piece of cake from there.
Quick and simple script that can get you started http://jsfiddle.net/sjqWu/1/
Combine what you've learned from other stackoverflow anwsers with example above and you should be ok. Happy learning!

I'd question your design. To make the user have to click a field then click some text to insert into that field seems like too many steps. You could possibly utilize some sort of drag and drop routine. Or instead of the first click being a text box, maybe make it a drop down list?
I agree with WTK. You can store the record id or text box id using some sort of event, then proceed from there.

Related

Script to fill a value automatically in the webpage input box

My job is to order diagnostic tests for patients and I need to write 6-7 characters value for each diagnostic test. I have 24 different values and I need to fill it many thousands of times. I am thinking to create 24 different scripts with Tampermonkey to speed up my job by clicking on the script box.
So the thing is that I need to fill this
box. Here are the input id and everything of that box in the console. Then I type the value manually, I get popup list which updates every time I type one character (same principle as google or youtube search box), here is the popup list after I type a value and if I want that diagnostic test, I need to click on it from the popup list, I cannot just simply click enter. So this is the code I have to fill the box by a value:
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '15002 '
})
The script fills the value, but the popup list doesn't appear and I need to click on the box, delete one character and write it again to get a list and then to choose a diagnostic test from it. Still, time-consuming.
I wonder, is it possible to make a script to add automatically a diagnostic test from the list like this example? If no, is it somehow possible to make that popup list would appear and I won't need to click on the box, delete one character and write it again? At least, could I make that the box is clicked after a value has been filled? I tried this code but doesn't work: document.querySelector("input#generic_test_order_search.ui-autocomplete-input").click()
Please help me to make it as automatic as possible, which would save me hundreds of hours in the long-term.
1 - As for the second part of the question. Picture 4.
It is pretty simple to make an auto-fill for the dropping parametres, we just might need the html-code of the elements.
For example,
document.getElementsByTagName('input')[0].click(); clicks the first input checkbox from the first input
document.getElementsByTagName('select')[0].selectedIndex = 1; selects the second value from the first select
document.getElementsByTagName('button')[0].click();clicks the first button
To make it more precise you might use class at first, at then tag:
document.getElementsByClassName('testClassDependingOnExistingClasses')[0].getElementsByTagName('button')[0].click(); for example.
Anything you do manually on a page like that can be done automatically with JS.
2 - As for the first part of the question. Picture 2.
Here is the part of the answer.
How to trigger arrow down press in js?
Maybe this code might help, but not enough information, since no data on html-code of the dropped elements.
document.getElementById('generic_test_order_search').clildren[0].click();

How to highlight multiple search results in input multiple textareas

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.

Saving user selection when contentEditable=false

I have included a simple homemade WYSIWYG editor into my HTML Javascript App by using a contentEditable DIV (let's call this EDITDIV) and a series of edit buttons in another DIV. Although far from brilliant it works for me and my users.
My problem is whenever I need to fix the text in EDITDIV which I do by simply setting contentEditable=false, I still want to allow the app users to be able select some of their previously editable text in EDITDIV and perform not edit operations on it, e.g. to use it as a search string.
To do this the users need to be able to select some of the text in EDITDIV and then click outside of EDITDIV. At this point the selection is no more. My question is how do I save the selection to use later on. I could do this every time the selection changes, or at the point when the focus on EDITDIV is lost. I tried both techniques. I cannot find an event (e.g. onselect, onselectionchange) that worked reliably for the first method and for the second method, setting contentEditable to false stops the focus, so the onblur event never happens.
Help much appreciated.

How to enable a backspace work inside a form textbox?

I'm using a form where in a text box is bound to a variable object by its path. I also have a button to fetch few records based on the input given in this text box. When I enter something for the first time and hit the button, it fetches the records. But again if I try to hit backspace or delete buttons inside the text box, it takes me to the previous page instead of simply deleting the text inside. Is there a way out? I tried with events like preventDefault() using keyCode restrictions, but in vain. Please help.
PS: This text box has regex validations and also has logic to pre-populate.
when records are fetched, you lose the focus on your text box. When you press the Backspace key once more, the browser takes you to the previous page (as most browers do). Set the focus back on your element after you fetch the records or change you code so the records fetching will not change the focused element.
See : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus

Custom Autocomplete in Google spreadsheet app

My question is the following, is there any tutorial about how to make that when you begin typing on a google spreadsheet cell, the fields belonging to a custom list that contains (anywhere on the text) the typed characters appears in a drop down list.
I do not know a lot of Javascript, so if there's any book or reference where I can found something similar it would be really appreciated.
I am new, and I don't know of any method for allowing the selection of valid values
to be position based upon what the user starts typing (into a cell).
I know this cannot be done within a script. All scripts run after the user
has made all of their changes (to a cell).
You may already know about a drop-down validation list using defined ranges.
This process puts a small down arrow adjacent to the right-edge of the box.
It allows the user to select from a pre-defined list. It does not prevent
the end user from entering invalid values. It just marks their value as
invalid if it does not agree with one of the entries in the list. And
by pressing the down-arrow, the list of valid values is displayed. The
user can select an entry in the list by clicking on it.
I learned about this validation from the documentation. If that is all you need
then you can stop here.
To me the interesting thing about this validation method is:
you can define the list and give it a name. The invalid error message will include the name. You can use the name to indicate the type of validation error.
The list can be contained on a different sheet other than were it is referenced. The sheet that contains the list can be hidden.
If you add a row to the list area that is not the bottom row, (insert below) the spreadsheet engine will automatically adjust the size of the defined range. The new values entered in the list appear in the updated drop-down list (in the order that they appear in the range definition).
What I have not tested is expanding the list from a script. I don't
know if the spreadsheet engine will perform the same range modification
if the change comes from a script. I would hope that it would.
Also I don't know if you make a changes to a hidden sheet from a script,
then will the hidden sheet remain hidden. I know when you do a "copy sheet"
function from a script, the source sheet is temporarily made current,
and is therefore no longer hidden.
Hope this helps.

Categories

Resources