We Keep Coding

Jquery on Paste Text as if it was typed

stackoverflowers. I'm working on an autocomplete app that needs to capture the input text character by character, and I'm currently listening to the "input" event with jquery.
The issue I'm facing is with pasted text, since the function is triggered with the whole input value, like this:
Pasted value = "demo"
input.val() = "demo"
But, what I'm looking to achieve is to decompose that pasted value as if it was actually typed in, and trigger the function 4 times like this:
Pasted value = "demo"
input.val() = "d"
input.val() = "de"
input.val() = "dem"
input.val() = "demo"
Could you guys give me any tips or directions on how to solve this issue with vanilla JS or Jquery?
Thanks in advance.

Try following approach:
<input type="text">
<div></div>
<script>
var myInput = $("input");
var value = ''; //to store previous input value
myInput.on('input', function () {
var current = myInput.val();
var dif = current.replace(value, '');
if(dif.length) {
var out = value;
for(var i = 0; i < dif.length; i++) {
out += dif.substr(i, 1);
output(out);
}
}
value = current;
});
function output(text) {
console.log(text);
$("div").text(text);
// here you can even to re-set input value via myInput.val
}
</script>
Try to input "1", "2", "345" and you will get "1", "12", "123", "1234", "12345" in the console log.
This approach would work only when you append text to the end of the input. If you need to insert text not only to the end of the input, the procedure should be updated.
See also Plunker.

I think you can check the length of input before display it to the screen.

Change a textfield into a link with the value of the textfield when it has lost focus, and back again when you click the link

I am creating a Private Messaging system, and I wanted to make it start with a textbox for the "To" field, then when you click out of it for the first time (it starting as a text box) it turns into a Link such as this:
POC0bob (edit) and when you click the Username, it will take you to their profile in a blank tab, when you click the edit it all goes back to a textbox.
Link to jsfiddle with what I have so far.
$(document).ready(function() {
$('a.edit').click(function () {
var dads = $(this).parent().parent();
var dad = $(this).parent();
dads.find('label').hide();
dad.find('editusnm').hide();
dads.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
I sorta stole that code, and edited it from another stackoverflow question, but it didn't help much.
That is kind of the basic idea I have, but I need the textbox and link to change based on the value of each other.

You can change the text and href attribute of the link on focusout by updating the focusout function to this:
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
// Get username
var username = $(this).val();
// Set the jQuery object to a variable so we're not getting it twice
var $usernamelink = $('#username');
// Set the link text to the text box value
$usernamelink.text(username);
// Set the link href incorporating the textbox value
$usernamelink.attr("href", "/Profile/?user=" + username + "");
});
Then add an id to your anchor:
<p class="text-info"><a id="username" href="/Profile/?user=[Username]">Username</a></p>
See this Fiddle: http://jsfiddle.net/j2sgdx22/

Set focus after a particular item in an inputbox in jquery/javascript

So lets say I have an input box that looks something like this:
<input id="fuzzyname" value="" placeholder="&Fuzzybear">
I want to use javascript/JQuery so that when I click in that input box it will put the cursor after the & and the placeholder becomes the value in the input box.
This is kind of what I have so far:
$("#fuzzyname").focus(function () {
var value = $(this).attr("placeholder");
var symbol = "&";
var cursorIndex = value.indexOf(symbol);
//This is where I want to output the value into the inputbox with the cursor after cursorIndex
});

var cursorIndex = value.indexOf(symbol) + 1;
$(this).val(value);
this.setSelectionRange(cursorIndex, cursorIndex);

changing text for a selected option only when its in selected mode

I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks

You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/

You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});

Getting text of html select in javascript?

select.onchange = function() {
this.value;
}
It's easy to retrieve the value but now I need the text of the selected element. How to do it?

(Sorry... put .value before my edit instead of .text by accident 8-)...)
this.options[this.selectedIndex].text

//assuming "this" is the select element
if (this.selectedIndex >= 0) {
this.options[this.selectedIndex].text = "some text";
}