jQuery - get current text selection within input field - javascript

I have several input boxes with the same class name. I want to be able to get the currently highlighted text and know exactly which input box that text is in. My current method is as so:
$(document).on("mouseup", ".element", function(){
var text = "";
var activeEl = document.activeElement;
var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
if (
(activeElTagName == "textarea") || (activeElTagName == "input" &&
/^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
(typeof activeEl.selectionStart == "number")
) {
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
} else if (window.getSelection) {
text = window.getSelection().toString();
}
});
This gives me the current text selection and I can call $(this) to access the element that the highlighted text is in.
The problem with my current method however, is that if you begin the click and then drag outside the text box, say just outside the left edge of the text box, you'll have highlighted text within the box but the event will not register, since the mouse click ended outside the scope of the input field. How can I remedy this issue?

You can bind more than one event to a handler.
So just bind mouseleave too!
$(document).on("mouseup mouseleave", ".element", function(){

You can use an onselect event on the input boxes. When you select the text, an onselect event is reigistered. Afterwards, you can find the starting point of the highlighted text and the ending point of the highlighted text.
See snippet below
$(".boxes").on('select', function() {
if (window.getSelection) {
text = window.getSelection().toString();
var start_index = this.selectionStart;
var end_index = this.selectionEnd;
console.log(this.value.substr(start_index, end_index));
}
}) //end mouseover
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in1" class="boxes">
<input id="in1" class="boxes">
<input id="in1" class="boxes">
<input id="in1" class="boxes">
<input id="in1" class="boxes">

You can set a variable like isMouseDown outside of the scope of the event handler like so:
var isMouseDown = false;
$(document).on("mousedown", ".element", function(){
isMouseDown = true;
});
$(document).on("mouseup", document, function(){
if (isMouseDown) {
var text = "";
var activeEl = document.activeElement;
var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
if (
(activeElTagName == "textarea") || (activeElTagName == "input" &&
/^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
(typeof activeEl.selectionStart == "number")
) {
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
} else if (window.getSelection()) {
text = window.getSelection().toString();
}
}
isMouseDown = false;
});

Related

JS Function Not working from KeyCode / How can i call this JS function with keyboard key

Here is a simple script function getSelectedText() that is working on button click. It means that when we select any text and click on the button, the function is creating a new NEWCLASS div successfully. But now I want to use a shortcut key, like CTRL+W to get selected text in the NEWCLASS div.
I tried this code but it doesn't work. Please, check it and let me know what mistake I am making here.
var input = document.getElementsByTagName("body")[0];
input.addEventListener("keyup", function(event) {
if (event.keyCode === 37) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
My code:
// Function to get the Selected Text
function getSelectedText() {
var selectedText = '';
// #### create a new element with variable (nw) #### //
var nw = document.createElement("div"); // Element's tag
nw.className = "NEWCLASS"; // Element's class name
// some applied style
// window.getSelection
if (window.getSelection) {
selectedText = window.getSelection();
}
// document.getSelection
else if (document.getSelection) {
selectedText = document.getSelection();
}
// document.selection
else if (document.selection) {
selectedText =
document.selection.createRange().text;
} else return;
// #### get the Selected text appended to body #### //
nw.innerHTML = selectedText;
document.getElementsByClassName('maintitle')[0].prepend(nw); // Append element to body
}
<button id="mybtn" onclick="getSelectedText()">Button</button>
<p>Select any part of this sentence and press the button. Select any part of this sentence and press the button. Select any part of this sentence and press the button</p>
<div class="maintitle"> </div>
the ctrl key with w will close the chrome browser so I used "Z" key for that you can replace the key code with whatever you want.
Find the keycodes here
const keySelected = new Set();
document.addEventListener('keydown', (e) => {
keySelected.add(e.which);
if(keySelected.has(17) && keySelected.has(90)){
getSelectedText();
}
});
document.addEventListener('keyup', (e) => {
keySelected.delete(e.which);
});
/*
//jquery code if anyone want
$(document).ready(function(){
const keySelected = new Set();
$(document).keydown(function (e) {
keySelected.add(e.which);
if(keySelected.has(17) && keySelected.has(90)){
getSelectedText()
}
});
$(document).keyup(function (e) {
keySelected.delete(e.which);
});
});
*/
// Function to get the Selected Text
function getSelectedText() {
var selectedText = '';
// #### create a new element with variable (nw) #### //
var nw = document.createElement("div"); // Element's tag
nw.className = "NEWCLASS"; // Element's class name
// some applied style
// window.getSelection
if (window.getSelection) {
selectedText = window.getSelection();
}
// document.getSelection
else if (document.getSelection) {
selectedText = document.getSelection();
}
// document.selection
else if (document.selection) {
selectedText =
document.selection.createRange().text;
} else return;
// #### get the Selected text appended to body #### //
nw.innerHTML = selectedText;
document.getElementsByClassName('maintitle')[0].prepend(nw); // Append element to body
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="mybtn" onclick="getSelectedText()">Button</button>
<p>
Select any part of this sentence
and press the button. Select any part of this sentence
and press the button. Select any part of this sentence
and press the button
</p>
<div class="maintitle"> </div>
You don't need to recall the event on the button, you should be capable of detect the press of the key you want and call the function, like:
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.code === 'keyW') {
getSelectedText();
}
});
Ctrl+W is not such a good choice, as on Windows it is a common shortcut key for closing the current Window or document, so your script will not even get the key event.
But I'll pick Ctrl+Y instead.
You should not use the deprecated keyCode property -- nor the which property which another answer suggests -- notice the red notice in the MDN documentation.
It is even easier with the key property. And you can use the ctrlKey property to know whether the control key is down.
I would use the keydown instead of the keyup event, as you can then cancel any default effect of the key, with a call to cancelDefault.
document.addEventListener("keydown", (event) => {
if (event.ctrlKey && event.key == "y") {
event.preventDefault();
getSelectedText();
}
});
// Your original code:
function getSelectedText() {
var selectedText = '';
var nw = document.createElement("div"); // Element's tag
nw.className = "NEWCLASS"; // Element's class name
if (window.getSelection) {
selectedText = window.getSelection();
} else if (document.getSelection) {
selectedText = document.getSelection();
} else if (document.selection) {
selectedText = document.selection.createRange().text;
} else return;
nw.innerHTML = selectedText;
document.getElementsByClassName('maintitle')[0].prepend(nw);
}
<button id="mybtn" onclick="getSelectedText()">Button</button>
<p>Select any part of this sentence and press the button or enter Ctrl+Y.
Select any part of this sentence and press the button or enter Ctrl+Y.
Select any part of this sentence and press the button or enter Ctrl+Y.
</p>
<div class="maintitle"> </div>
This should work
var input = document.getElementsByTagName("body")[0];
input.keypress("w", function(event) {
if (event.ctrlKey) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});

When user enters text in textbox then append a prefix value

I have a textbox which needs to be filled with website URL. So when user places the cursor in the textbox then the textbox should prefill with "http://" (Not a placeholder).
If the user does not enter anything and moves to the next textbox then the textbox have empty value
If the user fills the textbox then the value is unchanged
I tried below Javascript code but did not work:
if (document.activeElement.id == 'input-textbox-id' && !document.activeElement.value) {
document.querySelector("#input-textbox-id").value="http://";
} else if (document.activeElement.id != 'input-textbox-id' && (!document.activeElement.value || document.activeElement.value == 'http://')) {
document.querySelector("#input-textbox-id").value="";
}
You can use the focus and blur events for this.
Assuming that the variable textBox contains the reference to your textBox element, you can use the following code:
let textBox = document.getElementById("a");
textBox.addEventListener("focus", function() {
if (!this.value) {
this.value += "http://";
}
});
textBox.addEventListener("blur", function() {
if (this.value == "http://") {
this.value = "";
}
});
<input type="text" id="a">
You will need to attach event listener by using addEventListener. Events you need: focus and focusout.
We add .http-prefill class for all inputs. We iterate over inputs array and attach event.
Please do not forget to remove eventListener when you are done eg. you unload the form.
To do so, just copy the code for adding listeners and replace addEventListener with removeEventListener.
inputs.forEach(function(input) {
input.removeEventListener('focus', onFocus);
input.removeEventListener('focusout', onFocusOut);
});
Example code:
var fillValue = 'http://';
var onFocus = function() {
this.value = fillValue;
}
var onFocusOut = function() {
if (this.value === fillValue) {
this.value = '';
}
}
var inputs = document.querySelectorAll('.http-prefill');
inputs.forEach(function(input) {
input.addEventListener('focus', onFocus);
input.addEventListener('focusout', onFocusOut);
});
.http-prefill {
width: 100%;
margin-bottom: 5px;
}
<input class="http-prefill" name="input-0" />
<input class="http-prefill" name="input-1" />
<input class="http-prefill" name="input-2" />
<input class="http-prefill" name="input-3" />
you can use some key events like onKeyDown and when keydown you can get hold of old value and append it with new value.
let keyPressed = true
function onKeyDown(event) {
if(keyPressed && event.keyCode !== 8)
{
keyPressed = false;
let oldvalue = document.getElementById('input-textbox-id').value;
document.getElementById('input-textbox-id').value = "http://"+oldvalue
}
if(!document.getElementById('input-textbox-id').value)
{
keyPressed = true;
}
}
here is working code. http://jsbin.com/zoxiwokepi/edit?html,output

window.getSelection() for contenteditable div *on click*

I have a contenteditable div and want to get the user's selection when they click a span.
My problem is that when I click the span, the selection gets unselected so window.getSelection().toString() returns ''.
How can I get this to work on click of a span?
I know the actual getSelection() works, because if I wrap window.getSelection().toString() in a setTimeout of 5 seconds, after 5 seconds, I get the selected text!
My code:
$('#btn').click(function() {
console.log(window.getSelection().toString()); //returns ''
});
#btn {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='btn'>get selection</span>
<br><br>
<div id='ce' contenteditable='true'>test</div>
You can store the selection when there is a click on your contenteditable div, then return it when you click on the button.
document.querySelector("#ce").addEventListener(function(){
userSelection= window.getSelection().toString();
});
document.querySelector("#btn").addEventListener("mouseup",function(){
document.querySelector("#selection").innerHTML=
"You have selected:<br/><span class='selection'>" + userSelection +"</span>";
});
http://jsfiddle.net/xnvp38u3/
Since there is no event you can use to specifically detect a 'select' or 'deselect', you'll have to listen to a mouseup event and populate a "cache variable" that can store the selection in the memory:
var selection = '';
document.getElementById('ce').onmouseup = function(){
selection = window.getSelection().toString();
};
document.getElementById('btn').onclick = function(){
console.log(selection);
};
Or, provided you have jQuery, you could try this more complaint version, which also factors in keyboard-based selections:
var selection = '', shifted = false;
$('#ce').on('mouseup keyup keydown', function(e){
if (e.type === 'keydown') {
shifted = e.shiftKey;
return;
}
if (
e.type === 'mouseup' ||
(shifted && (e.keyCode === 39 || 37 || 38 || 40))
){
selection = window.getSelection().toString();
}
});
$('#btn').on('click', function(){
console.log(selection);
});

Temporarily disable all currently active jQuery event handlers

I am making a TD element of table editable on double click:
$(document).on("dblclick", "#table>tbody>tr>td.cell", function(e) {
if (e.which != 1 || e.shiftKey || e.altKey || e.ctrlKey)
// need left button without keyboard modifiers
return;
reset_selection();
var editor = document.createElement("div");
editor.setAttribute("contenteditable", "true");
editor.innerHTML = this.innerHTML;
this.innerHTML = '';
// this.style.padding = 0;
this.appendChild(editor);
$(document).on("*", stub);
editor.onblur = function() {
// this.parentNode.setAttribute("style", "");
this.parentNode.innerHTML = this.innerHTML;
sys.editor = null;
$(document).off("*", stub);;
};
editor.focus();
});
function stub(e) {
e.stopImmediatePropagation();
return false;
}
But when i double click on the text inside the editable div, the double click event propagates to the parent td causing undesired consequences. There are also other events (select, mousedown, etc) i want to prevent, so writing a stub for each of them doesn't look nice to me.
Is there a way to disable all currently active jQuery event handlers and enable them afterwards? Or somewhow stop propagating all events from the editable div to its parents?
Or somewhow stop propagating all events from the editable div to its parents?
It may not be very palatable, but it's not that bad to specifically disable the events:
$(this).on("select mousedown mouseup dblclick etc", false);
(Assuming this refers to the cell you're editing.)
There is a limited number of events, after all, and on allows you to list them in a space-delimited string and disable them by passing false.
You can then re-enable them by passing the same list and false again into off.
Use on / off JQuery methods :
var myFunction = function(e) {
if (e.which != 1 || e.shiftKey || e.altKey || e.ctrlKey)
// need left button without keyboard modifiers
return;
reset_selection();
var editor = document.createElement("div");
editor.setAttribute("contenteditable", "true");
editor.innerHTML = this.innerHTML;
this.innerHTML = '';
// this.style.padding = 0;
this.appendChild(editor);
$(document).on("*", stub);
editor.onblur = function() {
// this.parentNode.setAttribute("style", "");
this.parentNode.innerHTML = this.innerHTML;
sys.editor = null;
$(document).off("*", stub);;
};
editor.focus();
};
function stub(e) {
e.stopImmediatePropagation();
return false;
}
//Active the events
$(document).on("dblclick", "#table>tbody>tr>td.cell", myFunction);
//Disable the events
$(document).off("dblclick", "#table>tbody>tr>td.cell",myFunction);
//Reactive the events
$(document).on("dblclick", "#table>tbody>tr>td.cell", myFunction);
Update
You can also manage a variable set to true if the event must not be taking into account :
var skipEvent = true;
$(document).on("dblclick", "#table>tbody>tr>td.cell", function (e) {
//Check variable and skip if true
if (skipEvent)
return false;
if (e.which != 1 || e.shiftKey || e.altKey || e.ctrlKey)
// need left button without keyboard modifiers
return;
reset_selection();
var editor = document.createElement("div");
editor.setAttribute("contenteditable", "true");
editor.innerHTML = this.innerHTML;
this.innerHTML = '';
// this.style.padding = 0;
this.appendChild(editor);
$(document).on("*", stub);
editor.onblur = function () {
// this.parentNode.setAttribute("style", "");
this.parentNode.innerHTML = this.innerHTML;
sys.editor = null;
$(document).off("*", stub);;
};
editor.focus();
});

to make that input text field holds focus and not to lose when I click on something else (to focus always be on input with id="input_message")?

I made simple web chat, bubles ( messages) above one text field (input message) and send button. How to make that input text field holds focus and not to lose when I click on something else (to focus always be on input with id="input_message") ?
var el = document.getElementById('input_message');
el.focus();
el.onblur = function () {
setTimeout(function () {
el.focus();
});
};
Here's the fiddle: http://jsfiddle.net/MwaNM/
Here's a dirty hack.
<input type="text" id="input_message" />
<script type="text/javascript">
with (document.getElementById('input_message')) {
onblur = function(e) {
var elm = e.target;
setTimeout(function(){elm.focus()});
}
onkeydown = function(e) {
var key = e.which || e.keyCode;
if (key == 9) e.preventDefault();
// code for tab is 9
}
}
</script>
var inputElement = document.getElementById("input_message");
inputElement.focus();
inputElement.addEventListener("blur", function(event){
inputElement.focus();
});
http://jsfiddle.net/653w1mpv/

Categories

Resources