Please does anyone know the script that can help me highligh the content of a textfield on the first click
on the second click the selection / highligh should be cleared from the text box leavingg the insertion point.
Thank You in ADvance..
The script selects the text on the first click, but after every consecutive click the textarea will behave like a textarea always does. When the text area loses its focus due to the blur event and you click on it again, the text will be selected again.
Live Demo on JsFiddle
(function () {
var area = document.querySelector('#txt'),
clicked = false;
area.addEventListener('click', function () {
if (!clicked) {
area.select();
clicked = true;
}
});
area.addEventListener('blur', function () {
clicked = false;
});
})()
Because of addEventListener and querySelector the example is not fully cross browser compatible.
Try this: http://jsfiddle.net/4Hkhx/1/
$(document).ready(function(){
$('input').click(function(){
$(this).select();
});
});
function SelectText(sender) {
document.getElementById(sender.id).focus();
document.getElementById(sender.id).select();
}
<input type="text" id="tbTest" value="Test" onclick="SelectText(this)" />
Related
Pre-story: I am using Algolia search to search on my website.If the user start typing in the input field the results will start appearing on the screen.
End goal: close the filters (toggle functionality) by default.
Issues: when the user start typing in the input the url change and the filters stay open.
If I apply the code in the console after the user finishes with typing I can see the button being close.
If I apply the jQuery codes bellow and while I am typing the filters stay closed, but again once the user stops typing the filters open again.
Once I finish with typing (input looses focus) the filters open again.
My approach:
First
$("input#dropdown_search").on('input',function(e){
$("b- utton.button.filters__button").click();
});
Second
$('input#dropdown_search').keyup(function() {
$("button.button.filters__button").click();
});
Third
$('input#dropdown_search').on('inputchange', function() {
$("button.button.filters__button").click();
});
Fourth
$("input#dropdown_search").on('change keyup paste', function () {
ApplyFilter();
});
function ApplyFilter() {
$("button.button.filters__button").click();
}
It seems that they don't reach the end goal where they keep the filter hidden even after the user stops typing.
Can you please help?
Try this
$("input#dropdown_search").on('change', function () {
$("button.button.filters__button").trigger("click");
});
For your stop typing problem try this answer: Run javascript function when user finishes typing instead of on key up?
You can use trigger to trigger click
$("#dropdown_search").on('change keyup paste',function(event){
$(".buttonclass").trigger('click'); //trigger .buttonclass button on trigger of events
})
$(".buttonclass").on('click',function(event){
alert("I am clicked")
})
Example jsFiddle
Try this:
var timer;
$("input#dropdown_search").on('change keyup', function () {
clearInterval(timer);
timer = setInterval(function() {
ApplyFilter();
}, 1500);
});
type in first input , that will click the button immediately then fire function to change the second input value
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type=text id=dropdown_search>
<input type=text id=dropdown_search2>
<button id=target onclick="be()">
<script>
onload = function () {
var t = document.getElementById('dropdown_search');
t.oninput = function (){
document.getElementById("target").click();
};
t.onpropertychange = t.oninput; // for IE8
t.onchange = t.oninput;
};
function be() {
var t = document.getElementById('dropdown_search').value;
document.getElementById('dropdown_search2').value=t;}
</script>
</body></html>
I am using ckeditor for text formating and there is default text inside editor which I want to show selected on focus at all time.
Here is my code
HTML:
<textarea id="FirstTextEditor" >Hello</textarea>
Javascript:
$(document).ready(function(){
CKEDITOR.instances.FirstTextEditor.on('focus', function () {
// What is code i want write to select all text on focus?
});
});
You can simply achieve what you want like this:
CKEDITOR.instances.["your instance here"].on( 'focus', function () { this.execCommand( 'selectAll' ); });
If you used JQuery, it would look like:
$(document).ready(function(){
$('textarea').focus(function(e){
var that = this;
setTimeout(
function() {
that.select()
}, 0);
});
});
JSFiddle - http://jsfiddle.net/s6Z82/5/
The only thing you now have to figure out is how do you get the current element from the CKEDITOR.instances.FirstTextEditor.on callback and you are done.
Why the setTimeout(.., 0)?
Cause seems in Chrome e.preventDefault() does not stop it from discarding the select and putting the cursor to the end of the line.
I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.
Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works
Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});
I want to have all the text selected when I give the focus to an element.
I used
$('.class-focusin').focusin(function(e) {
$(this).select();
});
But it's not the perfect behavior I want. When i click between two characters, the input value is not seleted, there is a cursor in the middle.
I want the behavior of the url bar in chrome browser: you click and the cursor is replaced by the value selection
Feel free to test my problem in this fiddle:
http://jsfiddle.net/XS6s2/8/
I want the text to be able to receive the cursor once selected.
The answer selected, below is definitely what I wanted, Thanks
You could have a variable to see if the text has been selected or not:
http://jsfiddle.net/jonigiuro/XS6s2/21/
var has_focus = false;
$('.class-focusin').click(function(e) {
if(!has_focus) {
$(this).select();
has_focus = true;
}
});
$('.class-focusin').blur(function(e) {
has_focus = false;
});
I guess you have to wait for the browser to give focus to the element, then do your selection:
$('.class-focusin').focus(function(e) {
var $elem = $(this);
setTimeout(function() {
$elem.select();
}, 1);
});
Yuck. Or simply bind to the click event instead:
$('.class-focusin').click(function(e) {
$(this).select();
});
Try using click instead of focusin.
$('.class-focusin').click(function(e) {
$(this).select();
});
Demo
Bye!
Working Demo http://jsfiddle.net/cse_tushar/XS6s2/22/
$(document).ready(function () {
$('.class-focusin').click(function (e) {
$(this).select();
});
});
It's a direct duplicate of Select all the text in an input, focusin, here's a nice answer from it
$(".class-focusin").on("focus",function(e){
$(this).select();
});
$(".class-focusin").on("mouseup",function(e){
e.preventDefault();
});
http://jsfiddle.net/XS6s2/31/
I am trying to select a textbox that has my link to this page url in it. I use:
$('.linkTo').focus(function() {
this.select();
});
$('.linkTo').blur(function() {
var input_value = this.value;
this.value = input_value;
});
But it only works the first time, the second time it puts a deselected cursor where I clicked.
Try using foucusin() and focusout()
http://api.jquery.com/focusin/
http://api.jquery.com/focusout/
Solution edited out from the question:
<input onclick="this.select();" class.... />