In my file make-tweet.component.html, I have the next html tag:, which, I use it to be able to use a div as if it were an input because I add dynamic content with classes, that's why I don't use input.
<div (input)="handleText($event);" contenteditable="true" style="width:300px;"#textarea> </div>
With the (input) event, I can see the content of the label.
But what I need is to validate while the user is typing if he meets a requirement. If it doesn't, don't display anything in the "editablecontent" div, something like a "return false". I am using Angular 11.
Related
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.
I try to use jQuery to give the element value in NetSuite to test, but cannot find out the HTML DOM ID of some customized drop-down list. Not the internal ID.
E.g.
<input type="text" id="soid">
However some ID for the customized elements can be found, and some are not.
Can we add an HTML ID for the element in NetSuite?
are you trying to get the ID of this input field using JQuery?
If so just use $('#soid').val(); Or to get the text in the field $('#soid').text();
Select a value on the dropdown
Right click the dropdown and press INSPECT
look for a hidden input with the similar ID to your dropdown with the class named nldropdown
set THIS field manually using Jquery
We do this alot and there is not straightforward docs on it
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();
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.
Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.
A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms
You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});