I have two text area with same content.One is read only text area and other is editable text area. When a user deletes any text using 'delete' or 'backspace' or 'ctrl+x'then that data need to be highlighted in read only text area. The highlight should always show up the difference between read only text area and editable text area. Any idea how to achieve this goal. Have tried few options nothing is working as expected. Experts help is greatly appreciated.
All this happening in one component.
HTML code:
<label class="edit-title">Topic Description (System, Read-Only)</label>
<textarea rows="14" cols="60" class="description edit-text-area" [(ngModel)]="data.topicDescLong" readonly></textarea>
</div>
<div class="topic-section topic-divider">
<label class="edit-title">Topic Description for Presentation</label>
<textarea rows="14" cols="60" class="description edit-text-area" [(ngModel)]="data.editedTopicDescLong" (ngModelChange)="onEditLongTopicDescChange()"></textarea>
</div>
Component Code:
onEditLongTopicDescChange(){
if(this.data.editedTopicDescLong.trim().length === 0 )
{
this.isSaveDisabled = true;
this.isSubmitDisabled = true;
}else{
if(this.orginalEditTopicLongDesc != this.data.editedTopicDescLong)
{
this.isSaveDisabled = false;
this.isSubmitDisabled = false;
}
else{
this.isSaveDisabled = true;
this.isSubmitDisabled = true;
}
}
}
When user Delete any text using 'delete' or 'backspace' or 'ctrl+x'
Then the selected text should be removed from the editable section
and highlight the deleted part on read only section. Sample Image Attached
Left is readonly text area and right is editable area.
Related
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
Below is my code for the text area.
<div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
</div>
I want to display the content entered in this text area in another DIV.
Below is the code to display the content of text area.
<div data-bind="text: environment"/>
This div is displayed as shown in the below image.
Issue:
The new line is not captured when I am displaying the content in another div.
What all I tried?
I tried below ways to see if new line /n will be displayed as is, from text area.
But, no luck !
<div data-bind="html: environment"/>
<div data-bind="value: environment"/>
Please suggest if anyone has faced such issues.
Thank You!
Add the css rule white-space: pre-wrap to your div:
var viewModel = {
environment: ko.observable("initial text")
}
ko.applyBindings(viewModel);
div {
white-space: pre-wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Change text and click outside textarea in order to update value.</div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
<div>Entered text:</div>
<div data-bind="html: environment()"></div>
It's a bit dirty, but... You can replace '\n' with '' for display div:
var viewModel = {
environment: ko.observable("initial text")
}
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Change text and click outside textarea in order to update value.</div>
<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>
<div>Entered text:</div>
<div data-bind="html: environment().replace('\n', '</br>')"></div>
I am trying to put conditions for displaying a hidden div. I want that after entering some value in 'name' textbox and if we click on search link then the hidden block should appear. But in my code, if we click on search link first then enter any value in textbox then also the hidden div is appearing. But I need that only after entering value in textbox , if we click on search then only hidden div should appear.
Iam using below code for hiding the div-
<div ng-show="name.length>0 && IsVisible">
and in script I am writing this code-
$scope.isVisible = false;
$scope.ShowHide = function () {
//If DIV is hidden it will be visible and vice versa.
$scope.IsVisible = true;
}
I have created a plunker here-
https://plnkr.co/edit/oVwZONrn4gtQs1BaiMbO?p=preview
Can any one help me how can I achieve this?
You should add a condition in the method ShowHide itself:
$scope.ShowHide = function () {
if($scope.name) {
//If DIV is hidden it will be visible and vice versa.
$scope.IsVisible = true;
}
}
If you wish the hidden section to be visible only when 'Search' is clicked, then make changes as per following in the HTML file:
<div ng-show="IsVisible">
Refer to the demo here
Check this plnkr. Added a watch on name change:
<input type="text" name="name" class="form-control" ng-change="resetShowHide()" ng-class="" ng-model="name" required/>
and if the name length is 0, reset is IsVisible
$scope.resetShowHide = function(){
if($scope.name.length) $scope.IsVisible = false;
}
I am using a textbox for input description and can be quite long to edit. Is there a way to make it multiple row?
If this could be done in css that would be the best!
I don't want to use textarea because when it appears on a search form and people push "enter" it goes to the next line. If you can stop that then that would be acceptable.
You cannot make an input element have multiple lines of text, but you can make a text box very close to an input element with just the few differences you want.
All you need to do is prevent the default action for the enter key when the enter key is pressed inside of the textarea.
//When key is pressed inside elements with no-enter class
$(".no-enter").keypress(function(e) {
//If the key pressed is the 'enter' key, prevent the default action (next line).
if(e.keyCode === 13) e.preventDefault();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="no-enter" placeholder="A whole lot of useless text that goes to the next line."></textarea>
If you would like to remove the text area's resizing property to make it look more like an input element use this in your CSS.
.no-enter {
resize: none;
}
//When key is pressed inside elements with no-enter class
$(".no-enter").keypress(function(e) {
//If the key pressed is the 'enter' key, prevent the default action (next line).
if(e.keyCode === 13) e.preventDefault();
})
.no-enter {
resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="no-enter" placeholder="A whole lot of useless text that goes to the next line."></textarea>
I suggest to use textarea itself. use the rows with that
<textarea name="Text1" cols="50" rows="3"></textarea>
This way you will have only 3 rows. or you can make it to '1'.
To disable the enter key:
<asp:TextBox ID="TextBox1" runat="server" onkeydown = "return (event.keyCode!=13);" >
</asp:TextBox>
if you want to use it in code behind :
TextBox1.Attributes.Add("onkeydown", "return (event.keyCode!=13);");
I have a TextField.
Here is a snippet:
this.textField = new TextField();
this.textField.defaultTextFormat = font.format;
this.textField.selectable = true;
this.textField.border = true;
this.textField.wordWrap = true;
this.textField.multiline = true;
And here is the method to add new line to the textField box:
this.textField.htmlText = 'some text <IMG SRC="http://gravitatestudio.com/wp-content/themes/gravitate/images/facebook.png">';
The issue is that an image is always placed UNDER text instead of the END OF THE TEXT.
Here is the trace(this.textField.htmlText) after html text has been added:
<P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="12" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">some text <FONT SIZE="2"><IMG SRC="http://gravitatestudio.com/wp-content/themes/gravitate/images/facebook.png"> </FONT></FONT></P>
Also I need to add an image to any side of the text like a chat message using smiles (left, middle, right side of the text).
Any suggestions?
TextField html text is very limited and thats why Adobe released TLFTextFields which will give you much more control over the layout of elements in the field. I have personally used it and have made entire chats out of one textfield with images, links etc.
resource:
adobe: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/text/TLFTextField.html
tutorial:
http://flashsimulations.com/2010/09/10/handling-image-loading-in-tlf-textflow-and-textfield/