Cursor missing after typeheadOnSelect - javascript

I have a text box with [typehead] attribute, on the event (typeheadonSelect), once the value is selected from the drop-down list.
The issue is cursor disappears once the user selects an item from the list, the item displays on the textbox but the cursor disappears.
I want the cursor to appear back on the text box. Any idea why this would be?

You can add following style within your tag to generate cursor back.
style="cursor: pointer"
eg:
<input type="text" style="cursor: pointer"/>

Related

How to display datalist when selecting the entire input element content and pressing delete?

I have a HTML input element and an associated datalist.
<input list="product_list" id="product_input">
<datalist id="product_list">
</datalist>
It works fine and what is displayed in the datalist is correctly updated when the user types in or delete characters in the input. However if the user selects the entire content of the input (either by pressing Ctrl+A or by using the mouse) and press delete, the input is correctly emptied but the datalist does not update.
Currently, to update the datalist, the user needs to click on the input field after deleting its content for the datalist to update. Is there a way to avoid doing this additional click and simply having the datalist updating when removing the content of the input element?
Thank you

How to get the selected text focus again after contenteditable lost focus and gained it back programmartically

I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked
One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.

Allow typing input into text field while selecting text

Given a block of text in a div and an input field:
I want to be able to select some text in the div (drag across it with my cursor):
Then click on the input field and enter some text while "ome rand" remains selected (unlike in the following image / JSFiddle):
JSFiddle: https://jsfiddle.net/moa9xf2j/
My attempt at this so far has been to get the startIndex and endIndex of the selected text, then use setSelectionRange when the input field is clicked on. However, this didn't let me enter text in the field.
There can be only one active selection/cursor in any given frame.
In order to keep the old selection and still type in an input box, your selection and your input box need to be in different frames.
So do something like
main.html
<html><body>
<div>Some test</div>
<iframe src="otherdoc.html"></iframe>
</body></html>
otherdoc.html
<html><body>
<input></input>
</body></html>
You can use iframe's srcdoc attribute to avoid having a second document.
https://jsfiddle.net/p4ar85sg/

on click is not working due to change in td width

I have a strange problem, that i have a <table> and on <td> there is a text box and on the next <td> there is an add button. In the text box, there is an onblur function which will hide the textbox and create a <span> for the textbox value. the span has a lesser width than textbox .
Also there is an add button Onclick event, My problem is that when we type something on text box and then click on add button, `onblur' event works first and click is not working because the click button position changes when the text box hides.
Anyone help me what I have to do get the both event works and i want these event should work separately
<Table>
<tr>
<td><Span>bla<Span><input type="text" onblur="hideTextboxCreateNewSpan()"/></td>
<td><a onclick="AddNewTextBox()">Add</a></td>
</tr>
</Table>
This is my table structure Sample and i have tons of code in these both function i cant copy here any one please help me
Try using setTimeout, then the button will be clicked before the hideTextBoxCreateNewSpan is called:
onblur="setTimeout(hideTextboxCreateNewSpan, 0);"

Jquery blur() effect on input and div

So I am building an input field with an auto-suggest box that suggests content based on the user's partial input into the field. Kinda like the tags box on stack. The auto-suggest box is absolutely positioned directly below the input field and only appears once the user begins to type text.
I want to make the box disappear when the input field is blurred, that is, when the user clicks anywhere else on the site. Normally, I would just use jquery's blur() function to hide the auto-suggest box. The problem is that if I do it this way, the user won't be able to select anything from the auto-suggest box because that would blur the input field and hide the auto-suggest box. I need to find a way to hide the auto suggest box if the user clicks anywhere except for the input field or the auto suggest box. Any ideas how I could set that up using jquery?
Imagine it is setup something like this:
<div id="auto_suggest">
<ul>
<li>Jane</li>
<li>john</li>
</ul>
</div>
<input type="text">
Use a timeout.
$("input, #auto_suggest, #auto_suggest a").blur(function() {
$('#auto_suggest').addClass('hiding');
setTimeout(function(){
$('#auto_suggest.hiding').hide();
},1000);
}).focus(function() {
$('#auto_suggest').removeClass('hiding').show();
});
$('#auto_suggest, #auto_suggest a').focus(function() {
$('#auto_suggest').removeClass('hiding').show();
});​
Updated to work well with tabs or clicks:
http://jsfiddle.net/iambriansreed/vUeeT/

Categories