We Keep Coding

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.

Input field extends after setting value?

In my app I have few forms where users can pick the value and that value will show in text input field. These values are usually one to three characters. Once I pick the value my input field extends (changed the width). Input field has enough space (size set to 10) and there is no reason to be extended. I have checked if my values are trimmed and nothing is odd with the value. I'm wondering if this is related to JQuery .val() that I use or something else? Here is example of my code.
HTML:
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="status" id="status" value="" data-master="SS_STATUS" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
JQuery:
//Looping through the table with the records where users choose desired code/value for their input field
$('#searchTbl tbody tr').on('click', function(){
var codeVal = $.trim($(this).find('td:eq(0)').text()); //Here I grab the value from the table
$('#status').val(codeVal).css('font-weight','bold'); //Here input field is populated
});
I have attached image where you can see input field before and after user selects the value. There is obvious difference in field size. Nothing changed in HTML structure (I monitored in my dev tools after value is set).

If I'm correct, you're not only setting a value, but also applying a style: .css('font-weight','bold');, I suspect it's the reason you have a change of your input's width...
Try removing this call to .css() to check, and if it confirms, try applying your style once on rendering the page...

How to set prefilled input field active with Jquery/javascript?

I'm using a calculator widget where I can enter random values into an inputfield and then the widget automatically calculates when clicking the "go"-button.
Now I want to insert/prefill the value into this input field, since the value which needs to be calculated comes from a server. The issue though is, that this input field apparently only reacts on keypress. I tried to do this:
$('input[name="value"][data-type-money]').val('150.000').focus();
and
$('input[name="value"][data-type-money]').val('150.000').select();
which prefills the input field with the desired value but when I click the "go" button the calculation fails as long I dont enter the value manually into the input field. So, in the end my solution does not work.
Does anyone know how I can solve this?

If data changes frequently you can also use the setInterval function:
<input name="value" data-type-money="money">
setInterval (function(){
var moneyValue = "150.000";
$('input[name="value"][data-type-money]').val(moneyValue);
},1000);
fiddle here: http://jsfiddle.net/85pbnnu1/
or you can just do:
$(document).ready(function(){
$('input[name="value"][data-type-money]').val('150.000').change();
});

Edit, Updated
the input field is -
and reacts only on keypress, I mean when value is entered manually
If input value property cannot be changed , try replacing the element in DOM with value set at html using .replaceWith()
$('input[name="value"][data-type-money]')
.replaceWith("<input name=value data-type-money type=text value=150.00 />")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="value" data-type-money type="text" />

How to define default values for HTML form elements without populating the field?

I have a huge form with many text boxes. Not all are mandatory but I dont want it to send undefined to my backend since many are of type integer and float.I need to define default values for all of them but I don't want the users to have to delete the default values before entering theirs everytime. The default values show up if I do value="defaultVal" in the <input>...</input> tag. I tried providing placeholder="..." but still value overrides placeholder. Any suggestions to achive this?

you can set the default value as you have been, and then just clear the input field onFocus, so that the user can enter into a fresh slate

You can try this:
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />
Source code

How to hide the value of textbox using jquery

If the user did not give any value to text box the value 0 (zero) to be set on blur but the text box should not display the value How can i do it using jquery
<g:textField name="distance" id = "distance" value="${tripInstance?distance}" min="0" class="number" />

You can't as "value" is the display value.
Only way you be able to do it is intercept the form submission and prepopulate with default values if none are entered.
Failing that, the best place to hand it would be at the server end, ultimately where this kind of thing should happen.
That said, you should never rely on JavaScript to set/enforce default values as the user may not have JavaScript enabled or worse they are manipulating before sending it to you.
In that respect JavaScript should be considered dirty.
On second thoughts, you could do this:
<input type="hidden" name="distance" id = "disatance_default" value="0" />
<g:textField name="distance" id = "distance" value="${tripInstance?distance}" min="0" class="number" />
I think, if nothing was entered into the "textField" it wouldn't get sent back to the server, and therefore the hidden input field with the same name would take precedence.
The last most field of that name (which contains a value) will always be the one that is sent back to the server.

I dont see a reason for doing this. why do you need to set it to 0 and not display it.. if you need to do some prcessing on this value then check if this value is set or not. if it is not then select 0.