Develop Reference

Input field with buttons or spans inside

I have a feature in mind for an interface I'm developing but I'm not entirely sure of how to bring it to fruition. I'm basically after an input field with a set of buttons to the side which insert a span/button inside the input to represent the button clicked.
So in a simplified version of my imagined interface, I can type into the field as normal but when I press one of the buttons to the side, they also insert text into the field. Let's say if I press button 1 it inserts the text "Hello" and button 2 inserts the text "Emma". Fairly easy.
The more complex version which I want to create works similarly, but when I click button 1 it inserts a bubble inside the text field. The bubble has its own background colour, contains the word "Hello" and has a small x in the top right to dismiss it. When the bubble is inserted it moves the carat on past the inserted bubble and I can continue to type as normal. If I hit backspace when the carat is to the right of the bubble, it deletes the entire bubble at once. Here's a simple example image:
I feel like I've seen this kind of thing on the internet a lot but I can't work out how it's done. Is there a way to pull this off with an input field? If it's not possible which alternatives should I be looking into?

I don't think you can do this with just an input unless you go change the standard implementation of input for your page :)
I think your best bet would be to have a structure like this:
<div class="wrapper">
<div class="shownContent">Is that <div class="tag">Emma</div></div>
<input class="underlyingInput"/>
<div class="tagsButtons" />
</div>
undelyingInput is hidden - available but hidden.
Style shownContent to look like an input.
You then handle clicks on shownContent: if they click shown content, focus the hidden underlying input, BUT show shownContent as focused.
Now if the users start to write after they clicked on shownContent, that text is actually going into the input!
When value changes in the input, use the new value to parse it into text and tags, and set the html content of shownContent
Once you got this, removing tags from clicks on the left and adding them from clicks on the right should be straightforward.

You could try using a series of inputs, instead of just one:
<div class="wrapper">
<input /> <!-- "Is that " -->
<button>Emma</button>
<input /> <!-- "? " -->
<button>Hello</button>
<input /> <!-- ", " -->
<button>Emma</button>
<input /> <!-- "!" -->
</div>
The wrapper is just for styling purposes: you'd give it a border and make the input elements borderless.
You'd need to override a lot of keyboard commands on the input elements. For example, backspacing at the beginning of that last input would cause the preceding button to be deleted, and merge the contents of the two adjacent input elements.
You'd also need to consider the effect of hitting the Home and End keys (and equivalents in other OSes).
Moreover, you'd wanna make sure the input elements will resize as their contents change. It's a little tricky, but doable!
Here's a jumping off point: https://codepen.io/exonj/pen/jxQxGV

This is a tagsinput. Checkout this
Bootstrap TagsInput. It has the same functionality as you wanted.

Qualtrics Storing Text Input to Embedded Data by Creating New Buttons

I've been struggling with this for a long time and finally have half a solution but not the rest.
Basically, I need Qualtrics respondents to enter a number input into a textbox inline, and I want to store that input as Embedded Data.
So far, in the html of the Qualtrics page, I have
Enter data here: <input type="text" id="myText" value=" ">
<input type="submit" value="Confirm" onclick="formdata()"/>
<script>
function formdata(){
var questionanswer= document.getElementById("myText").value;
Qualtrics.SurveyEngine.setEmbeddedData("Q1input", questionanswer);
}
</script>
This works fine. It creates the text box where they can enter "myText," and then it stores this as Embedded Data Q1input, which I can then access later. However, it's annoying because they have to click this "Confirm" button I created and then leave the page using the normal Qualtrics Next Page button. I did this because I couldn't get it to work at all by running this when the Qualtrics Next Button was clicked, so I had to make it run on my own button.
I've tried to disable the Next Page buttons using the disableNextButton and clickNextButton Qualtrics code, but I don't know where to put it. I can disableNextButton by putting the code in the addOnload portion, but I can't seem to get clickNextButton to run in the formdata function.
Any help would be greatly appreciated! I don't really know JavaScript; I'm just trying to pick this up to run a survey.

The easiest way to handle this is actually just to call your function any time the text entry field changes. Since Qualtrics includes PrototypeJS, you can use the following:
Enter data here: <input type="text" id="myText" value=" ">
<script>
function formdata(){
var questionanswer= document.getElementById("myText").value;
Qualtrics.SurveyEngine.setEmbeddedData("Q1input", questionanswer);
}
$('myText').observe('change', formdata());
</script>
Two thoughts here:
You should be including your script in the JavaScript section of your question, rather than the html edditor. It belongs in the addOnReady Section.
Qualtrics.SurveyEngine.addOnReady(function()
{
function formdata(){
var questionanswer= document.getElementById("myText").value;
Qualtrics.SurveyEngine.setEmbeddedData("Q1input", questionanswer);
}
$('myText').observe('change', formdata());
});
You could achieve the same effect by using a text entry question type in Qualtrics, then using piped-text to add it to the embedded data field in your survey flow.

Qualtrics: Javascript to prevent saving entry from Text Box

I have one Text Box (also called "Text Entry") in my qualtrics survey in which I want participants to write something but I do not want to have the result saved in my data. I do not want to use the password function, therefore I have used JavaScript at the Text Box level.
The code below works to the extent that whatever participants put in the Text Box it will be set to an empty string the moment they hit the Next-Button.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var currentQuestionID = this.getQuestionInfo().QuestionID
var input = $("QR~"+currentQuestionID);
$('NextButton').onclick = function (event) {
input.value = ""
}
});
The problem: This code only works sometimes. For example when I have two textboxes with the exact same code it only works for the first but not the second one. Similarly for some reason if the textbox is embedded in some other questions it doesn't work either.
Does anybody know how I can make this work either by changing my code or with a completely different solution? Essentially, I just want participants to entry some text which will never be saved in my data and I cannot use the password function.
Solution: One way of solving this would be adding a "Descriptive Text" item in which you can add some simple HTML code:
<p>Please provide your email address:</p><p><br></p>
<input name="nothing" type="textarea">

I don't think JavaScript works well in this case as it can't be guaranteed to run before the page has sent the data.
The best way is to make a dummy HTML "question" which has the appearance of a form but does not save any information.
I tried this out in a test survey by adding a question of type "Descriptive Text", and then in "HTML View" for that question, adding:
<p>This is not a real question, there is just a HTML textarea. </p>
<form id="mydummyform">
<input name="nothing" type="textarea" />
</form>
I found that this sometimes showed the HTML source instead of the form in the survey editor; if it does this, just go to "HTML View" and then "Normal View" and it should resolve correctly. This problem was only in the editor -- it always showed correctly in a preview of the survey.

checkbox value within submit button

So this is tough to describe but I cannot figure it out, I feel like i am close however!
Basically I have a list of things, that need to be organised.
lets pretend its books, I have all these books, with all the information on them (author, length, title, genre). If I wanted to search my array of books specifically for comedic books. I would tick the comedy tickbox and hit search.
I have gotten this to work easily! the tricky part is that I would like it to search straight away when it is selected, however my javascript searches through checkboxes to see which checkboxes are selected before it runs my code that eliminates the answers that are irrelevant. so it needs to be a checkbox value that is submitted.
Is there a way I can have an image that functions as a button, that carries a value of a checkbox...???
so far I have gotten this close:
<div class="wells">
<input type="image" value="comedy" src="img/pieces/comedy.png"
alt="comedy" onclick="myFunction()" checked>
</div>
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
the long way is like this:
<img class="imgcomedy" src="img/pieces/comedy.png"> :
<input type="checkbox" class="roundedOne" name="comedy" value="comedy">
then the user would scroll to the submit button and hit send, sending the value of the checkbox to the function myFunction().
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.

You can give image which behaves as checkbox, when you click on submit it gives values like true.or false for that check box.

One possible solution, depending on what your actual requirements are...
You can use a <button> instead of a checkbox; the contents of a button are fully customizable with essentially any HTML...
<button type="submit" class="roundedOne" name="comedy" value="comedy">
<img class="imgcomedy" src="img/pieces/comedy.png">
</button>
You may want this as a submit button, and/or attach a javascript click-handler.
If you need several categories chosen together, such as "list things in either category drama or comedy" which you can do with checkboxes, you have several options.
You could also include a checkbox but keep it hidden, and then check/uncheck it by using your click-handler attached to the button.
You could keep an <input type="hidden" value=""> field and set the value in your click-handler, adding and removing categories; for example
initial: value=""
after clicking the comedy button: value="comedy"
after clicking the dramay button: value="comedy,drama"
after clicking the comedy button again: value="drama"

How to prevent deselection of selected text on blur (focus lost) in html

I have been doing research on this simple sounding issue for a couple of days and I have not seen any result.
In a nutshell my problem is as follows: I would like to select text in a some input field, move focus to another field (or generally speaking some other element), but not lose my selected text.
Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.
A small code test sample would be (for my initial simple scenario - here I am forcing text selection when the second input field gains focus):
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="text1" size="20" value="Test1"/>
<input type="text" id="text2" size="20" value="Test2"/>
<script>
$('#text2').focus( function (evt) {
var target = $('#text1')[0];
target.select();
console.log('active/focused element: ' + document.activeElement.id);
});
</script>
</body>
</html>
I have been searching SO and web for a solution to this and have not seen much if any help.
I am not sure this is even really possible (due to the link between blur and selection lost and focus and selection). I have seen a style property called preventDeselect, in another SO answer - this does not work and I have not even such documentation or browser support for this.
I am quite struggling with this and would appreciate some help: even saying I can't do this at all or maybe some ways to go.
UPDATE:
Just for the record, my user scenario, which refers to text selection and context menu, is a common one (it slipped my mind to mention): just select some text in this page (or in an input type field) and right click to get the browser's default context menu - my scenario is different in that i want to use a custom menu, but with similar behavior to the browser's context menu - which normally allows to select some text, cut/copy the selection, navigate within the context menu without losing the selected text. So I think it should be possible somehow :) to do all these things with a context menu and still have your selection.

Attempting to answer this part of your question:
Such a situation could correspond to a use-case in which I select text
in a field, right-click and display a custom popup menu, but do not
wish to lose focus of selected text, because I want to do some
operations on the previously selected text.
For this use-case, I created a quick fiddle: http://jsfiddle.net/4XE9a/1/
Note: Am using the same getSelection function from #David's answer.
If you select any text and then right-click on the input, a custom popup menu appears. Click "option 1". You will find that the selection is not lost even though the focus has shifted to that anchor tag.
However, for the second part of your question regarding focus shifting to another textbox, #David's answer suffices.
Update: (after your comments)
Please see this updated fiddle: http://jsfiddle.net/783mA/1/
Now, when you select some text and right-click on the input it will show the custom popup menu with three options. Use tab to navigate and press space or click on the highlighted option. (Due to paucity of time I could not implement up/down arrow keys, but the concept remains the same)
This demonstrates your question in the comment that the selection is still not lost while navigating the menu.
Note: You are wanting to visually keep the selection highlight and not lose the selection while clicking anywhere else. Please note that this is not possible because text selection behavior is OS implemented. Browser, html etc do not play a role here. The text selection is lost as soon as you click anywhere outside the context of selection. This is because the system starts expecting a new selection as soon as you click anywhere outside. However, controls without text surface are exempt. Button, scrollbar arrows etc will not cause selection to lose.
To view this behaviour, in the fiddle, select some text and then click any dropdown on the left pane. The text selection is not lost, even visually for that matter.
This is why in the new fiddle above, I purposely used buttons to demonstrate.

You can save each selection in an interval, then retrieve it when you like. Here is an example that pulls the selection when the input has focus and clears the interval on blur:
function getSelection(elm) {
var start = elm.selectionStart;
var end = elm.selectionEnd;
return elm.value.substring(start, end);
}
$('input').focus(function() {
var self = this;
$(this).data('interval', setInterval(function() {
$(self).data('selection', getSelection(self));
},20));
}).blur(function() {
clearInterval($(this).data('interval'));
});
Now you can stuff like:
$('#text2').focus(function() {
console.log('selection in #text1 was: '+$('#text1').data('selection'));
});
Demo: http://jsfiddle.net/qCCY5/