append text on search input on click - javascript

I have few anchor elements containing some text, something like "Cat", "Cow", "Dog".
When I click on "Cat" for example I want to append the text on the search input.
I've tried this:
jQuery(' .link ').on('click', function(event) {
jQuery('input[name="search"]').val(jQuery('.link').text().trim());
jQuery('input[name="search"]').keyup();
});
But I need a way to listen for each anchor element and update the search input accordingly, right now it works just once.
Any suggestions?

The problem is caused by your selector inside the click function, instead of adding the text of the clicked element to the search box, you are writing all elements' texts to the search box sequentially, thus only the last .link text remains in the search box. Try this instead:
jQuery(' .link ').on('click', function(event) {
jQuery('input[name="search"]').val($(this).text().trim());
jQuery('input[name="search"]').keyup();
});
Here's a Fiddle, see if that's what you were looking for.

You haven't provided HTML so I'll take this(stackoverflow) page as example...
You can take text and add it to yours input property accordinglly: document.getElementById('search').children[0].placeholder = document.getElementById('nav-tags').textContent;
Practically, you should do something like this:
Some animal
Or, to make it more readable, create function and add event listener, but this is base...

Related

How to change text based on textarea length

I added the following code, and I am getting the text to update, but only when clicking outside of the textarea.
$('.form__input-el').change(function() {
$('.form__character-indicator').text($('.form__input-el').val().length);
})
Why is this happening and how can I make it update without clicking outside of the textarea?
you you can use keyup if you want to get change the output immediately
$('.form__input-el').keyup(function() {
$('.form__character-indicator').text($('.form__input-el').val().length);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form__input-el"></textarea>
<div class="form__character-indicator"></div>
Try with input instead of change this will trigger everytime the user inputs something.
according to jQuery docs: For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus
This is why your event appears only on leaving the textareas focus.
https://api.jquery.com/change/
a complete list of the events can be found here:
https://api.jquery.com/category/events/
so you need to use another event, maybe like:
https://api.jquery.com/keydown/
Use a keyup event to update your character count while the user is typing
Try something like this
$('.textarea').on('keyup', function() {
var newCount = $(this).val().length
$('.count').html(newCount)
})
Here is a jsfiddle

How to cancel selection in contenteditable div?

On my page, I have a contenteditable div element. When a specific key is pressed, a function executes:
function bla(element) {
if (getSelectionHtml() != "") {
replaceSelectedText("text");
}
}
getSelectionHtml() checks if something is selected by the user. replaceSelectedText(text) replaces the selected text with a given string. Both functions are working properly.
After the selected text has been replaced, I want to 'cancel' the user's selection, as the selection is now equal to the 'new' string, so just deleting the text is not an option.
I tried this:
element.style.userSelect = "none";
element.style.userSelect = "text;
But it didn't work because userSelect: none doesn't seem to change anything in a div element with contenteditable. Also, this solution looks pretty ugly for such a simple problem.
So, how can I cancel the user's selection?
I think you want to remove selection completely. You can do so once you have replaced the string with
window.getSelection().removeAllRanges()
So basically, once you select the range of content, you can get the range with window.getSelection() method which returns set of details about selected content. It has many functions to alter the range and remove the range completely. To know more, you can read in brief of all supported methods Selection API

How to make a span from user selection (js)

I want to make a text editor. It should work the way all text editors work (including this one i am using right now), so the user makes a selection of the text, presses a button or whatever, and then some function is executed.
I want my editor to work in the following way:
1. User selects
2. Function selected() is triggered that makes a span around the selected text.
3. When user clicks a button such as "B" or "I", they invoke functions that change .style of the span element.
For now I figured out how to get string from user selection, nothing more than that.
<body>
<textarea onselect="selected()">Some text here, more text here.</textarea>
</body>
<script>
function selected() {
var preselection = window.getSelection();
selection = preselection.toString();
console.log(selection);
}
</script>
textareas can't contain spans, so you will need to use something like this if you decide to use spans:
<p contenteditable="true" ...
You probably don't want to fire your function every time a user makes a selection. Instead, just run the function if a user presses a button (like the bold button) and then pick up the selected text, if any, using something like:
document.getSelection().toString()
Now adding a <span> object to an HTML element is pretty easy, but the big challenge here is that you don't know if your selection will cross other span objects (like if the user already added some formatting). Notice that stackoverflow inserts characters like ** in the edit area and then does one pass to add in tags like <strong>. This is possible in a text area as well, so you wouldn't need contenteditable="true".
It is possible to analyze what is in your selection and then collect all elements involved, and rewrite them as needed. You would have to get all parent objects involved in the selection and then add <span> elements around the text inside each of the parent objects.
To simplify this, you might make a rule that only one level of tags is allowed in your editable region, and then always re-write for that so that the results would only have one level of span:
<span class="bold">This whole sentence is italic and </span><span class="italic_bold">this half is also bold.</span> with no nesting of these span tags.
Investigating these properties might help with dealing with nesting: https://developer.mozilla.org/en-US/docs/Web/API/Selection
These string commands might also help:
https://www.w3schools.com/jsref/jsref_obj_string.asp

Keep cursor on textarea after clicking on DIV

I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();

Jquery Selector use of not

I have div having class name ".modalPopup" inside the div I have multiple table and inside table I have divs and inside the multiple controls like text box(input) and dropdownlists(select).
I want is that I want to fire click event when user click on any where on main div which have "modalPopup " except the dropdownlist(select).
I try using my options but I can't get the specific click event.
Like this:
$('.modalPopup :not(modalPopup select)').click(function(){
document.write("working for click except select ");
});
Can any one please provide me the solution?
Easiest way is to just bind the click event on the div with class of modalPopup and then check what the user actually clicked on using e.target:
$('.modalPopup').click(function(e){
if (!$(e.target).is('select')) {
document.write("working for click except select ");
}
});
e.target is the dom element that was clicked. $(e.target).is('select') gets that dom element and created a jQuery object from it and checks if it is a select.
JSFiddle Example
You are missing a dot before .modalPopup in the not() condition.
$('.modalPopup :not(.modalPopup select)').click(function(){ document.write("working for click except select "); });

Categories

Resources