jQuery - How to drop content to concrete position into INPUT? - javascript

I'm solving such a problem with Drag&Drop via jQuery.
I have a simple HTML where there are MARK elements inside the LABEL, which I make draggable. Then I want to transfer these elements to INPUT (text). For CSS using PicoCSS.
JS:
$(document).ready(function () {
$("mark").draggable({
helper: "clone"
});
$('input[type="text"]').droppable({
drop: function (event, ui) {
this.value += ui.draggable.text();
this.focus();
}
});
});
HTML:
<label for="MF">
Any information about XYZ... Drag and drop to input: <mark>Item1</mark>, <mark>Item 2</mark>,<mark>Item 3</mark>
<input type="text" id="MF" name="MF" placeholder="Drop there" required>
</label>
I can do that thanks to the code, but DROP always puts the content at the end of INPUT. Is there any way to modify the code to insert content at a specific position of INPUT?
It may be that there is a string in the INPUT, e.g. "Yesterday I met ? and told me that...". And I need to drag the text from the MARK with the mouse to the question mark, and the text will be inserted (dropped) at that position to the question mark. Unfortunately, so far it works by drop (insert) only at the end. The need is to keep everything in forms, the data will be retrieved from the DB, further processed and stored again in the DB.
You can run it there - https://codepen.io/vontrips/pen/jOYzGOM

Related

javascript onblur starts too soon

I have a div containing an input followed by an ul :
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
value
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.
HTML code :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
One li :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
I repeat my question with code :
I have a div containing an input followed by an ul :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.
I'm tired, I'll go to bed :-)
My answer was on wrong page. Shoot again :
I have a div containing an input followed by an ul :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.

Typeahead input element styling

I have a simple textbox input that looks like this:
<input type="text" placeholder="Search for states">
and I want to do an autocomplete on it, similar to typeahead. The autocomplete part works, but I want to display in the textbox first suggestion:
For instance, having written "Al" and I get the following suggestions:
Textbox: Al
Alabama
Algeria
I want to have in the textbox, as faded text: Alabama (the abama to be faded).
How can I do this with jQuery or pure JS?
Having basically in the same textbox, 2 text styles for 2 substrings?
If there are other methods (e.g. overlaying another transparent text control on it) and you can show me an example that would be great. I cannot change the input element (that is a given).
code pen:
http://codepen.io/mozzi/pen/XKKJWq
this is very slimier to what you need. I've selected text instead of fading it as you can't do half faded text in a text box. let me know what you think.
HTML:
<div class="ui-widget">
<label for="automplete-1">Type state name: </label>
<input id="automplete-1" placeholder="U.S. state name">
</div>
javascript:
$("#automplete-1").autocomplete({
delay: 0,
source: UsStateNames,
response: function(event, ui) {
var start = $("#automplete-1").val().length;
$("#automplete-1").val(ui.content[0].value);
var end = ui.content[0].value.length;
$("#automplete-1")[0].setSelectionRange(start, end);
}
});

Changing JS mask on_focus to on_load or equivalent

Currently, my text field will only change its appearance after clicking on it (see attached screenshot). I am trying to change it so that it appears like that all the time, without the need to click on it (the field is pre-filled with values).
Here is the relevant code:
HTML:
<input type="text" value="1234567890" id="customersNumber" data-type="phone">
JQuery JS:
$(document).on('focus', 'input[data-type="phone"]', function() {
$(this).mask("(999) 999-9999");
});
Thank you.

Element added to DOM but doesn't display on screen

Basically my problem is that when i add an element from the javascript (using jquery) the element that i added shows up in the web inspector but doesn't display in the browser at all.
What i am trying to do is simulate something i liked about google+ when it first came out, which is when you want to the user to enter a list of item, you provide them with one text field and once they start to add something to that text field then instantly after the first character is typed a new text field with appear under that. So I'm my code, i have the user entering a series of goals they want to achieve, i provide them with a single text field (or multiple if the user is editing the list they previously made) and once the last text field has data then it will programmatically create a new text field.
HTML:
<div class="field-group clickToAddGroup">
<label>Goals: </label>
<div class="input">
<input type="text" name="goals" value="Goal1">
<input type="text" name="goals" value="Goal2">
<input type="text" name="goals" value="Goal3">
<input type="text" name="goals" value="Goal4">
<input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
</div>
</div>
Javascript:
$(".clickToAdd").live('keyup',function(){
console.log("key up triggered");
if( $(this).val() != '' )
{
console.log("cloning in process");
var theClone = $(this).clone().val(''); // Set the new element to null
theClone.appendTo( $(this).parent() ); // Clone Parent
$(this).removeClass('clickToAdd'); // Remove the click to add class
console.log("clone complete");
}
console.log("key up finished");
console.log("----");
});
$('.clickToAddGroup input').live('blur', function(){
if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
$(this).remove();
});
Now the code above actually works, however when the page first loads when i click (or tab to) the last text field (one that has the clickToAdd class) and begin typing, i see in the web inspector that the javascript ran correctly and created the new field and placed it where it should, but i don't actually see it on the screen. But when i take the content that i had just wrote in the text field, delete it, and lose focus (triggering 'blur') the text field is deleted and then i can see the textfield that was shown. From this point on when i add content to the last field (one with the clickToAdd class) it works 100% perfectly, it adds the element and is visible via both the web inspector AND is displayed on screen.
Edit: I copied the code to jsfiddle (included css i am using as well) and tried it there and it happens to work perfectly as intended without the issue i am having. http://jsfiddle.net/qz2QK/2/
Edit 2: Added "var" to the line "var theClone = $(this).clone().val('');" so that its not implicitly a global variable.

How to add buttons to the content of a textbox in javascript

I need some kind of textbox control that can host buttons along the text strings. Basically I want to create a textbox with names that enables the user to remove some names after addition. How can this be accomplished in javascript ?
Thanks in advance.
Just add SPANs before the textbox in your element. Format the SPANs as colored boxes with the text and maybe an X for deleting the entry and you're good to go.
Using JQuery this is really easy. Or do you want a Webforms-Control which is able to do that?
Edit:/
The Inline-Element could look like that:
<span id="my-filterbox">
<input type="text" name="next-filter" />
</span>
And then your JS to add a key-event handler. Im using JQuery in this case:
$('#my-filterbox').keyup(function(event) {
if(event.keyCode == '13') { // 13 = key code for enter
var value = $(this).val();
$(this).val('');
$('#my-filterbox').prepend('<span class="filter-elem">' + value + '</span>');
}
});
This way you add the filter to the span my-filterbox everytime the user hits enter. Per CSS you're able to format the span at the left side of the input box.
This code is untested but I think you get the idea.

Categories