how to get highligted (blur) area in text box in angular javascript - javascript

I have a text element and I want to get the section that is highlighted selection by mouse only, so lets say user writes 123456798 in the textbox and then select 456 with mouse and I want to get 456, how can I do that ? Does angular library provide me something for it ? Couldnt find in methods.
Here is my complete html code for the part.
Actually I entered it but needed to remove first and last <> characters
<input type="text" id="dialpadText" call-from-dialpad="startAudioCall()"
ng-model="dialpadText"
ng-change="dialpadTextEntered()"
placeholder="Enter a name or number" autofocus=""
class="ng-valid ng-touched ng-dirty ng-valid-parse ng-modified">

If I understood your question correctly then you wants to get or alert the highlighted value being selected by mouse, right? If that is so, then here is the solution, simply with the help of JavaScript, you can alert the selected value of portion of the text:
<input type="text" onBlur = "getSelectionText()">
<script>
function getSelectionText(){
var selectedText = ""
if (window.getSelection){ // all modern browsers and IE9+
alert(window.getSelection()); //it will alert the selected value
}
}
</script>

Related

cursor gets hidden and cannot type after window.find()

this is my input field:
<input type="text" id="searchField" [(ngModel)]='search'
(ngModelChange)='searchCalled()' class="input-text" placeholder="Filter by
Name">
and my function is:
searchCalled():any {
var text = this.search;
(<any>window).find(text);
}
after an alphabet is matched in window.find(), the cursor gets automatically hidden from the input field and I cannot type in the input field. I have to click it again in order to type. But if anything is not matched, the cursor remains there and the input field is still in focus. I have written separate functions on blur, and mouseleave to check whether it is getting blurred but it's not getting blurred which I have tested.
I tried using
document.getElementById('searchField').focus()
but it's not working.
I am using typescript in angular 4.
Any help would be appreciated.

How to edit dynamic form fields to create a single hidden field comprised of the value of two fields

I need to send a form off to where a single hidden field is comprised of two of the other fields that will be dynamically populated by a user (post/zip code and first line of address) where after regular expression only the numbers remain "123|456".
I have attempted to start, using the code below, where I monitor the output in the console. I have managed to dynamically edit a textfield so that all that is shown are the numbers but this is not suitable for a user. So I was trying to store the edited textfield data into the hidden field whilst leaving the complete line of address but I could not see how this can be done.
Also, can someone explain why if I remove the commented line the variable is not stripped of any letters albeit just 1?
$(document).ready(function() {
$("#testMe").on('propertychange change click keyup input paste', function() //attaching multiple handlers
{
var removedText = $("#testMe").val().replace(/\D/, '');
$("#testMe").val(removedText); //only removes once if removed
console.log(removedText);
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="hidden" id="hide" value="">
<input type="text" id="testMe" value="">
<span id="test2"></span>
The question was kind of unclear to me, but I did my best to answer.
https://jsfiddle.net/ccu6j6xu/
<input type="hidden" id="hide" value="">
<input type="text" id="zip" value="">
<input type="text" id="address" value="">
<span id="test2"></span>
In the HTML, all I did was add another input, because I think that's what you wanted to do?
$(document).ready(function() {
$("#zip, #address").on('propertychange change click keyup input paste', function() {
var concatText = $("#zip").val().replace(/\D/g, '') + "|" + $("#address").val().replace(/\D/g, '');
$("#test2").text(concatText);
$("#hide").val(concatText);
});
});
Then in the JavaScript, I changed the selector to match the new inputs, and then I changed the function.
The first line of this function defines a variable concatText to hold the values of each input concatenated with a | character between. Each one has regex applied to remove the letters for the final value. Then the next line changes the value of the span to display, and the final line applies this value to the hidden input.
Again, the question was kind of confusing to me, but feel free to comment and I can help some more :)
EDIT: reread the question, I think this better answers

Display text after typing in jQuery

I have this code: http://jsfiddle.net/juqc24ux/
<input type="text" placeholder="Enter your number here..." id="resultTextBox">
$('#resultTextBox').keypress(function() {
alert($('#resultTextBox').val());
}) // end keypress
I don't know what I'm getting wrong. I want to obtain the value of the text box after I press the button. This does not happen, however.
After I press '1', an empty alert pops up and then '1' gets entered into the keyboard. Then, after I press, say, '2', an alert with '1' pops up.
Why is this happening and how can I fix it in a sense that after I press '1', it gets into the text box and then it's being shown in the alert? I'm pretty sure it has to do with the priority of executing the code, just I'm not sure how to fix this..
UPDATE: Some of you pointed that 'keyup' works. But why does it work and keypress doesn't?
keypress event is sent to an element when the user first presses a key on the keyboard.
keyup event is sent to an element when the user releases a key on the keyboard.
Use keyup instaed. Like below.
$('#resultTextBox').keyup(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Enter your number here..." id="resultTextBox">
Keypress executes before the letter gets entered into the textbox. Think of the process this way:
keypress event fires
Key does what it normally does, in this case enter the number 1 into the textbox
keyup event fires
That's why your alert comes up empty after entering 1 and only displays '1' after entering 2 afterwards. It can only alert what was present in the textbox at the instant you press the key before anything else gets the chance to happen, including entering a number in the text box.
<input type="text" placeholder="Enter your number here..." id="resultTextBox">
$(document).ready(function() {
$('#resultTextBox').keyup(function() {
alert($('#resultTextBox').val());
}) // end keypress
});
</script>
Or another method if you want
<input type="text" placeholder="Enter your number here..." id="enternum">
<input type="text" placeholder="show result" id="resultTextBox">
<script>
$('#enternum').keypress(function() {
$('#resultTextBox').val($('#enternum').val());
})
</script>

JavaScript: How to detect a non empty input text box

I am learning JavaScript and and am working on a To Do list type of application.
Idea: "Add" button is set to disabled in the HTML and only to be enabled when there is at least one character.
My code only works when there is at least 2 characters and can't workout why it doesn't detect the first character.
The other realted question is how do I set the "add" button back to disable if the input box content has been deleted.
HTML
<input id="addToListInput" onkeydown="buttonStatus()" value="" type="text"><input id="addToListButton" disabled type="submit" Value="Add to list" onClick="addToList(this)">
JS
function buttonStatus() {
var input = document.getElementById('addToListInput');
var submit= document.getElementById('addToListButton');
if (input.value.trim() ==""){
submit.disabled=true;
}else{
submit.disabled=false;
}
}
Use keyup instead. By using keydown you are detecting when the key is down, but the textbox value has not changed at that point...
<input id="addToListInput" onkeyup="buttonStatus()" value="" type="text">
onkeydown is fired before the input control is actually fired, if you use onkeyup it should work as you expect.

Element added to DOM but doesn't display on screen

Basically my problem is that when i add an element from the javascript (using jquery) the element that i added shows up in the web inspector but doesn't display in the browser at all.
What i am trying to do is simulate something i liked about google+ when it first came out, which is when you want to the user to enter a list of item, you provide them with one text field and once they start to add something to that text field then instantly after the first character is typed a new text field with appear under that. So I'm my code, i have the user entering a series of goals they want to achieve, i provide them with a single text field (or multiple if the user is editing the list they previously made) and once the last text field has data then it will programmatically create a new text field.
HTML:
<div class="field-group clickToAddGroup">
<label>Goals: </label>
<div class="input">
<input type="text" name="goals" value="Goal1">
<input type="text" name="goals" value="Goal2">
<input type="text" name="goals" value="Goal3">
<input type="text" name="goals" value="Goal4">
<input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
</div>
</div>
Javascript:
$(".clickToAdd").live('keyup',function(){
console.log("key up triggered");
if( $(this).val() != '' )
{
console.log("cloning in process");
var theClone = $(this).clone().val(''); // Set the new element to null
theClone.appendTo( $(this).parent() ); // Clone Parent
$(this).removeClass('clickToAdd'); // Remove the click to add class
console.log("clone complete");
}
console.log("key up finished");
console.log("----");
});
$('.clickToAddGroup input').live('blur', function(){
if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
$(this).remove();
});
Now the code above actually works, however when the page first loads when i click (or tab to) the last text field (one that has the clickToAdd class) and begin typing, i see in the web inspector that the javascript ran correctly and created the new field and placed it where it should, but i don't actually see it on the screen. But when i take the content that i had just wrote in the text field, delete it, and lose focus (triggering 'blur') the text field is deleted and then i can see the textfield that was shown. From this point on when i add content to the last field (one with the clickToAdd class) it works 100% perfectly, it adds the element and is visible via both the web inspector AND is displayed on screen.
Edit: I copied the code to jsfiddle (included css i am using as well) and tried it there and it happens to work perfectly as intended without the issue i am having. http://jsfiddle.net/qz2QK/2/
Edit 2: Added "var" to the line "var theClone = $(this).clone().val('');" so that its not implicitly a global variable.

Categories