I have a form where currently the label (span element) is separate from its input (text) field, but as part of a redesign it will move into the input field as a floating label (see jsfiddle below). However we also have a tooltip that shows on hover (onmouseover) over the label, and when the label moved into the input field the hover no longer triggers.
Obviously I could make the entire input field or the encompassing div trigger the tooltip or something to that effect, but that would get in the way of the actual input.
So I am looking for either a way to make it trigger on only the label text within the input field (wherever it may currently be, since it moves slightly based on focus), OR some way to integrate an icon into the input field that would be a static trigger point for the tooltip (which would still require some way of triggering hover on a specific element or limited area within the input field).
Is this even possible, or should I look for an alternative solution involving something outside the field?
This fiddle contains the basic structure and CSS to show what the field looks like: https://jsfiddle.net/xwoczh0a/
<div class="form-textbox">
<input type="text" class="form-textbox-input" name="x" id="x" aria-labelledby="x_label" placeholder=" ">
<span class="form-textbox-label" onmouseover="tooltip.show('Enter tooltip here');" onmouseout="tooltip.hide();" id="x_label" aria-hidden="true">Question goes here</span>
</div>
I hope this makes sense, happy to provide more details if not.
Related
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.
I know I can disable/lock part of an input box using
<input type="text" disabled="disabled"/>
or
<input type="text" readonly="readonly"/>
but I want to have
<input type="text" value="[[inputbox|edithere]]"/>
where the user can only edit edithere
I have tried to google this, however the only related things I can find are how to disable an input box completely or disable certain keys.
I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.
EDIT
http://jsfiddle.net/7rTMK/
You can't do this with a stock input just manipulating attributes.
However you can simulate this with css and some extra markup:
<div class="wrapper">
<div class="static text">static text</div>
<input class="text" type="text" />
</div>
Position "static text" div on top of the input and add left padding to the input text.
example http://jsfiddle.net/MTEec/
It's impossible. Use a tag to wrap the input, and put the uneditable parts before, or after the input, and style the tag to look like an input, and style the input to match that styling.
If you need the form to send all the data, create a hidden input after your input, and update it's value with JavaScript (to the static and the input's text concatenated) upon changing the value of the main input. That way when the form is sent, the later hidden input with the same name will be used.
While it's not entirely impossible to do, it would be extremely difficult to do and it's a very bad practice to try doing something like that, at least for your use case.
You should obtain the user input without restriction inside your input box, if you want to add square brackets or the such, you can add them later using either Javascript or your service side language.
Alternatively, if you really wish to display the characters inside the textbox, you can use claustrofob's solution and mess around with the CSS.
I need to implement a code in jquery, where I can enter any text in the text field, and then after I click on the "Submit" button, that text should turn into a clearable field something like this
I tried putting this box in my textfield, but this makes my whole text field as a clearable field,
$(document).ready(function(){
$('input[type=text]').clearableTextField();
});
I dont want to do this, I want that when i type something in the text field and click the Submit button, it should become a clearable text object.
Any help is appreciated!
Thanks.
One way to achieve this (similar to the way tag entry is done on Stack Overflow) is to have a separate div to the left of your input field into which "clearable text fields" are placed. When the submit button is clicked (or the spacebar is hit, or any trigger that javascript can listen for), have javascript create a new span within the left div, and reduce the width of the input field by the same width as the new span tag. You can include a delete button and any relevant styling in the HTML/CSS for the span.
A demo which achieves a similar effect through jQuery is available here: http://xoxco.com/projects/code/tagsinput/. (Suggested by #sachleen in response to a similar question)
Is there a Way with Javascript to add Help bubbles over an input Box?
For example when you you hover over an input for Name: _____ it would say like First Name????
Thanks
An example is this https://edit.europe.yahoo.com/registration?.intl=uk
When you go over the name field it says First name in a bubble
Do you mean the title attribute?
<input type="text" title="First Name" />
As said in another answer you can add a title attribute to a html tag to have a tool tip display.
Or if you are after the behaviour where information is displayed somewhere on the page telling you about the text box you have selected you can; dynamically add to a div using document.createElement() and appendChild() when you hover over the element and removing it with removeChild() upon moving your mouse away or change the innerHTML of the html tag on those two events.
Edit:
Unfortunately because I am a 'new' user I can't include all the hyperlinks to each part of the mozilla developer site, but simply search for those functions there for more explnation.
I am creating above text box in my JSP file which getting populated in javascript(basically content inside textbox is dynamic not static). I want to display the content of text box when I take mouse over text box. Is there any function in javascript I can use for it?
Use the onmouseover event handler. Modify the input's text using the value property. You can also use an onmouseout event handler to clear the text when the mouse leaves the input if you need it. See it in this fiddle.
For instance:
<input id="anId" type="text"
onmouseover="this.value=calculateText(this.id)"
onmouseout="this.value=''">
Just in case you'd like to do the same thing when the <input> gets/loses the focus (by TAB for instance), use the onfocus and onblur event handlers.
UPDATE It turns out the OP wanted to dynamically change the title attribute of the input, so that it pops up in a tooltip when the mouse hovers over it. This can be achieved adding an onkeyuponinput event handler to the component that sets this.title to this.value. Learn more about oninput here.
<input type="text" oninput="this.title = this.value">