Highlight Text Programmatically in Polymer Paper Input - javascript

I have several polymer paper-input elements on a polymer app. When one of these elements is focused, I'd like the text input of the input be highlighted (like this) so that if a user just starts typing, the existing value of the input is overwritten.
Is there a way to highlight the text programmatically on focus?

I figured it out.
inputElement.$.input.select()
Would be nice if this were documented somewhere.

According to this documentation, inputElement will return a reference to the actual HTML input element implemented in <paper-input>. You need to access the native element as select() is not implemented directly in <paper-input>.
HTML:
<paper-input id="my-input" value="[[myInputText]]></paper-input>
JavaScript:
querySelector('#my-input').inputElement.select();

Related

How do I highlight new text within a input field in html

Within Servicenow portals I am trying to create a input text field that has a few requirements when the user tries to make changes to the text. Within the form if the user wants to change the text that has already been added the new input text will have to be highlighted. Only the new changes can be highlighted. The previous text will stay the same without any highlights. I have looked into the html tag but that highlights the entire text field and also tried using a 'focus' within the css tag name.
HTML:
<input type="text" value={{data.text2}}>
CSS:
input:focus::first-line { background-color: #fff2ac;
}
You could use Javascript to position a dynamically generated span with the highlighting, on top of the input ... and then update that span's text whenever the underlying input changes.
See the last option in the top answer here for more details: How to highlight text inside an input field?.
It even mentions a jQuery plug-in with this effect that you could use, or examine the source of: https://github.com/garysieling/jquery-highlighttextarea.

determine if selectize input has focus

I can usually determine if a particular input has focus using $("#my_input").is(":focus") but this doesn't seem to work for selectize inputs.
I can set the focus for the input using $("#my_input")[0].selectize.focus() but then still $("#my_input").is(":focus") returns false.
When I inspect the element in Chrome I can see that a div right below my_input has the class attribute focus but it is not clear to me how to link this to #my_input.
I have also tried document.activeElement and document.activeElement.parentElement, etc. but no luck so far
Selectize.js is hiding the input you wrote in your markup and shows some dynamic elements instead.
Those are next to your original input.
Try:
if( $("#my_input").next(".selectize-control").find(".focus").length>0 ){
console.log("Selectize is focussed!");
}else{
console.log("Selectize is NOT focussed.");
}
If you follow me on this... By looking in the "next" div if there is a child having the focus class, you'll know if it's focussed or not..

Angularjs bind data to span text box

I have following span that I am using as a text input.
<span ng-model="sampleText" style="width:100px; padding:20px, 100px;" class="TextBox"></span>
Reason why I am using span instead of "input" or "textarea" is so that I have one box which can keep adding rows as I hit enter. This is more elegant way than showing a big box of textarea.
But problem I am facing is how do i bind the text that has been entered to the ng-model.
Maybe using ng-init?
Please let me know how to bind the text that has been entered to the "sampleText"
Thanks
The ngModel directive itself doesn't do much. It provides a controller that is used by other directives, like input (yes, input is a directive). That means you have to write your own one.
But you are lucky, because the documentation for the ngModelController has an example that's almost identical to yours.

How to get value of 'this' inputbox?

I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.
Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38
Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.
Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();
You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})

Enable placeholder in input field such that it empties 'after' user input as opposed to onfocus

I want to use the placeholder attribute for HTML input[type=text] elements such that the placeholder text disappears 'after' the user starts typing as opposed to 'onfocus'. Something like the sign-in page on pivotal tracker: https://www.pivotaltracker.com/signin
So far I've not used the placeholder attribute. Instead I used a 'onkeyup' event on the input field such that it empties the contents of the input field as soon as the user types the first character. To do this I've setup a custom attribute on the input element called 'data-received' which is false by default and is set to true as soon as the user types the first character. (So that it doesnt continue to empty the field). I can do something similar by 'unbinding' the 'keyup' method on the input field.
I m not so happy with this method and I was wondering if there s a better way to do this?
Ok I figured this out. I took some cues from the zendesk site as well. Firstly a placeholder attribute is not used. A label is used along with the input field with position: absolute. Its position to overlap the input field associated with it. Javascript is used to track the onkeyup event and as soon as it sees that the value of the input field is not empty, it simply hides the associated label. If you delete whatever your typed, it shows the label again :)
Check out:
Cross Browser HTML5 Placeholder Text (DEMO)
The placeholder attribute is used (if not using JS) but see above link to do it in a cross browser way.
HTML5 has a placeholder attribute but it may not work in all browsers.
HTML5 Placeholder Input Fields Fixed with jQuery has a fix that makes it work in all browsers.
jQuery plugins that do this
http://webcloud.se/code/jQuery-Placeholder/
http://www.iliadraznin.com/2011/02/jquery-placeholder-plugin/

Categories