I know this is possible in javascript by using window.getSelection() method but I'm not familiar with this selection object.
Can you help me to write a code to make user's writing cursor to be always at the begining of the input string?
$('input[type="text"]')
.attr('maxlength','7')
.keyup(function(){
var sel = window.getSelection();
console.log(sel);
// need a code for here to make the cursor (caret) at the begining of the string
})
Can be done using a combo of:
dir = "rtl"
moving text box caret to 0 after every keypress
Demo: http://jsfiddle.net/FF9Tf/1/
Note: Uses hints/code from these answers.
Set cursor at a length of 14 onfocus of a textbox
define cursor position in form input field
you could always use CSS direction: rtl;
this line of code simply changes the direction of the text to Right To Left
and then u could just add the css class to your html elements using .addClass("your_class")
It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.
Edit: Try putting .addClass("your_class") outside the keyup function (although that might still not give you the best result you are looking for), check my comment below for a better way to do it.
Update: here is another way to do it
$('input[type="text"]').change(function () {
$(this).val() = $(this).split("").reverse().join("");
});
try this, it will keep the cursor blinking at the beginning of the text in the input box
$('input[type="text"]')
.attr('maxlength','7')
.attr('dir', "rtl")
.keyup(function(){
var sel = window.getSelection();
console.log(sel);
// need a code for here to make the cursor (caret) at the begining of the string
})
try the demo link
http://jsfiddle.net/hcWCQ/1/
in the eg: click on the input box and then press Shift+TAB and then start typing
not exactly what u r looking for.... but somewhere close
Related
I have enableLiveAutoCompletion set to True which works great, except that our users do not want the first word to be automatically selected. For example, if the last word in a line of code is "x" and the user hits enter the first auto complete suggestion for the word x is auto filled.
Is there any way to disable the automatic selection of the first word suggestion on enter and force the user to use arrow keys? Or perhaps is there a way I add a blank keyword to the keyword list that is always matched by the completer function?
This looks like a bug in language_tools.js#L166 not resetting the value set from autocomplete.js#L496
the following hack seems to work around it
if (editor.completer) delete editor.completer.autoSelect
var Autocomplete = ace.require("ace/autocomplete").Autocomplete;
Autocomplete.prototype.__defineSetter__("autoSelect", function() { })
Autocomplete.prototype.__defineGetter__("autoSelect", function() { })
Let me start off saying that I am new to javascript.
I am trying to change a div's content to whatever letter I type in. So if I press "p" anywhere on the page, the div text will add that letter.
For example:
<html>
<head>
<script>
document.getElementById("change").onkeyup = function() {myFunction()};
function myfunction(){
}
</script>
</head>
<body>
<div id=change>p</div>
</body>
</html>
The function is where I am stuck.
I have seen a lot of examples involving typing in a textbox but none without one. If someone could guide me in the right direction, I would be very grateful.
Why does your code not work?
You can't use the keyup event on the <div> element as you have tried to do, because JavaScript will never fire it as the div is never focused. Elements have to be focused to receive keypress events, otherwise how would the user know where their keyboard was going to type to.
What can we do about that?
One element that always "has focus" is the <body> of the webpage (unless of course, you are using a different area of your web browser, such as bookmarking a site, navigating with the URL bar, etc).
So, we can detect the event on the body of the page, and then change the content of the div accordingly. We can detect the event using document.body.onkeyup = function(event), and then get change the div content using document.getElementById("change").innerHTML, which targets that div by it's ID, and then sets it's HTML value to something new.
However, JavaScript will only send back the code of the key that was pressed (it's internal representation of the key), not the character which the key represents - (this is actually useful if you are trying to detect if a key like backspace or ctrl has been pressed). We can get this value from the event using event.keyCode.
Thus, we will have to transform that into a string, which is the final piece of our code : String.fromCharCode(event.keyCode). This transforms a character code into a string.
All together, we can update the value of the div in response to a key press.
Working Example
document.body.onkeyup = function(event) {
document.getElementById("change").innerHTML = String.fromCharCode(event.keyCode);
}
<div id="change">p</div>
Notes
You can use onkeypress rather that onkeyup if you want to detect the case of letters;
You can use += rather than = if you want to append what you have typed now to what is already in the div;
If you want to just use a div as a place where you can type, check out contenteditable;
If you want a list of keycodes that do not map to a string value, check out this list.
If you want to add the letters as you press you can add use +=. Also onkeypress is case sensitive while onkeyup will give you capital letters.
document.body.onkeypress = function(event) {
document.getElementById("change").innerHTML += String.fromCharCode(event.keyCode);
}
<div id="change">p</div>
I am trying to add a custom piece of functionality ("module") to quill.js and cannot seem to do it. Here is what I need:
If want to add a button that inserts a template replacement variable... say
something like {{company}} at the location of the cursor in the
editor, is that currently possible with the API - I thought I could do
it using insertText but I cant seem to get it to work.
Thanks
What I ended up doing in a very similar setup:
let mergeFieldText = '{{company}}';
var selection = this._quill.getSelection(true);
this._quill.insertText(selection.index, mergeFieldText);
You should be able to do this with insertText but you might need to use getSelection to get the cursor location. The object returned by getSelection will have an index and length key. Adding the button and necessary click handler will be up to the implementor. Note focus should be returned back to the editor before calling getSelection with focus or simply passing true to getSelection.
This code snippet is to add symbol at cursor position with a custom button with Quill.js.
First declare quill variable:
var quill = new Quill('.editor', {
theme: 'snow'
});
With button click event, add symbol at caret position.
$('.symbols').click(function(){
quill.focus();
var symbol = $(this).html();
var caretPosition = quill.getSelection(true);
quill.insertText(caretPosition, symbol);
});
For any of you still having problems with this, know that if you have a bootstrap modal showing when trying to focus on the Quill to be able to use method getSelection(), you first need to close the modal before forcing focus on the quill instance.
I am dynamically filling textarea using Ajax call's. In my code, I want to get the cursor's current line content using window.getSelection. I tried following code,
var range = window.getSelection().toString;
alert (typeof(range));
But, It returns function as alert Message. or Any other better way, to get the cursor's current line content from textarea that code need to support in all browser's.? Once I get the current line content I will find out line number and update new content on it.
Firstly, textareas have a different selection API from regular content: use selectionStart and selectionEnd properties of the textarea rather than window.getSelection().
Secondly, getting the current line requires some creative coding if you're accounting for the browser's auotmatic wrapping of content. I've seen a few questions about this in Stack Overflow. Here's one example:
finding "line-breaks" in textarea that is word-wrapping ARABIC text
you can easily find focus() answers from the site or any site.. but what i want to know, how can i use focus after what i just inserted inside the input box.
$("input").val('#user').focus(); // this goes to start of the input box and foucs from start, but i want it to focus after the #user
$("input").val('#user today i did new things').focus(5); // i added 5 in focus method, obviously its not supported yet!, but the idea behind is, to focus it after #user from complete word.
EDITED:
i just saw that on firefox it works fine, but in chrome it starts the cursor from start. any solution?
Take a look at this question: jQuery Set Cursor Position in Text Area
You can focus an input area by triggering it on change event:
$("input").change(function(){
$(this).focus();
});
and if you want to check how many characters typed you can make a control on its callback:
//will focus if typed text's length is greater than 5
$("input").change(function(){
if($(this).val().length > 5){
$(this).focus();
}
});
hope it helps, Sinan.