Basically what my problem is that I have a input field and text area like so:
<input type="text" placeholder="Your URL*" id="userURL" ng-model = "usermodel"/><br />
<textarea id="final">{{usermodel}}</textarea><br />
So my problem is that text will be manipulated via controller, and I want the user to be able to type into the field WITHOUT the textarea refreshing.
For example:
controller: {
textareaoutoutput = "hi ..... How are you";}
textarea: hi {{usermodel}} how are you? <br>
input field: john
BUT when I type into the field, "Hi how are you" gets removed, and only the text field input is shown. I would like it so that the "Hi how are you" is fixed and will not change while the user can enter and still see it add instantly.
I hope that makes sense
inside controller :
$scope.textVal = " hi "+ $scope.usermodel + " how are you?"
<textarea id="final">{{textVal}}</textarea><br />
I hope you can understand it always try to function for the manipulate string
or
<textarea id="final">Hi {{usermodel}} how are you!</textarea><br />
hm, I am not sure if this will work.
the controller is going to output text to the text area, but I want the angular expression tags {{x}} to be in the middle of the the document will be outputting
Maybe this example will be better
textarea:
TEXTA + {{angular expression}} + TEXTB
is it possible to output data to text a and text b and have a user still add something to the {{x}} without refreshing the textarea
Related
I want to use text area for chat input box, because its resizable, in that I want some prefilled texts to be there, like
HI Jhon,
Thanks for contacting us....
I want to give new line after the text in textarea.
My code-
$scope.message = "Hi "+$scope.firstName+ ",Thanks for contacting us....... ";
I tried, using break tag but that did'nt worked
<textarea id="typeMessageBox" placeholder="Write here..." type="text submit" ng-model="message"></textarea>
How can I do this ?
Use \n instead of break tag.
eg: $scope.message = "Hi "+$scope.firstName+ ",\n Thanks for contacting us....... ";
I must be missing something very obvious with this but when I try to pass text into an input field, the script doesn't fail but it also isn't entering text into the text field. If it makes any difference, the text field will only accept numbers.
This is the html
<input type="number" class="form-control au-target form-control-warning" value.bind="bidAmount & debounce:500 & validate" au-target-id="126" placeholder="Enter Amount">
This is how I try it on my page object file
var amount = 60;
return element(by.valueBind('bidAmount & debounce:500 & validate"')).clear().sendKeys(amount);
I've also tried by.cssContainingText() and by.css() but neither are working
You can try,
$("input[placeholder='Enter Amount']").clear().sendKeys('hello');
or more explicit
element(by.css("input[placeholder='Enter Amount']")).clear().sendKeys('hello');
Do you get it with :
$('input[type="number"][class="form-control au-target form-control-warning"]').clear().sendKeys(amount);
I have this piece of HTML(JSP) code to input phone number !! on which JQuery has been applied to check the validity of input text by user.
<input type="text" maxlength="20" value="" id="phone" autocomplete="off" name="mobileNumberField" class="a-input-text a-width-medium a-spacing-small textbox" data-ng-model="mobile_number.value " data-ng-required="true" required="required" placeholder="mobile_number.value_def">
So suppose text in input box is +91 9056 6783 32
when i print data in controller using $scope.mobile_number.value
sometimes i get output like :
undefined or
+91 or
+91 9056
i don't get complete input text !!
How to i get complete input text in controller??
In Controller you can first declare an object
$scope.mobile_number={}
mainApp.controller('testApp', function($scope) {
$scope.mobile_number={};
$scope.mobile_number.value ="";
$scope.$watch('mobile_number.value', function() {
// do something here
console.log($scope.mobile_number.value);
});
});
Try to store your number as long datatype, rather than using a string.
To correctly display phone numbers in human-readable format, make use of angular-input-masks. The project is under MIT license. So feel free to modify the format to your liking.
Plunker is here: http://plnkr.co/edit/p3yFhsNwRO0v4kC915xF?p=preview
Dependency inject ui.utils.masks to your project.
Javscript:
var app = angular.module("app", ['ui.utils.masks']);
HTML:
<input ui-us-phone-number type="text" ng-model="myPhoneNumber" />
i tried the similar code but didnot get any issue .I am getting the complete number in controller.
In angularjs, how to get the exact text as entered into html textarea, I want to also track newlines, '\n' (in the textarea). I want to store this textarea into database exactly the same as entered into textarea. But it is taking all text into one line.
How do I detect that new line is inserted into html-area?
Please see the demo
I can use <pre> {{someText}}</pre>, but this will not solve my problem, Because I want to store into database.
<div class="col-md-12">
<div class="col-md-6">
<label >Location Based Address </label>
<textarea rows="4" cols="25" class="form-control" ng-model="someText">
</textarea>
</div>
</div>
I belive that the model does save newlines and such, see this small edit on your plunkr, using a <pre> tag to display the data.
Also, when I save data to my SharePoint list, in a 'rich text' field, it saves newlines. I think your problem is that the server doesn't preserve the new lines.
Please check i have edited your plunker code. Check updated code
angular.module('app', ['ngSanitize'])
.controller('SomeController', function($scope,$sce) {
console.log($scope.someText);
$scope.$watch('someText', function(){
console.log($scope.someText);
$scope.text = $scope.someText;
$scope.text = $scope.text.replace(/\n\r?/g, '<br />');
$sce.trustAsHtml($scope.text)
})
})
Hope this will help you.
You could replace spaces with \n and store it that way, but I'm not sure how 'strong' this solution will be.
Value from the textarea is passed as is to someText via ng-model="someText". You don't need to do anything with the text as you can see in console.
If you want to print the value somewhere on your page while keeping new lines as the user entered them use <pre> tag:
<pre>{{ someText }}</pre>
Well i'm not really sure of what is happening but i'll try a wild guess of all things that can happens :
When using textarea, \n characters are stored in the value of the ng-model.
If you want to display them either use <pre> or replace all \n by and use ng-bind-html (https://docs.angularjs.org/#!/api/ng/directive/ngBindHtml)
If you want to send them to the server through json you may have to escape \n to \n same when sending data from the server to the client. Or it will be the underlying layers off your framework that will do it.
Make sure you're working with UTF-8 server-side/database or you may have problems with \r\n and \n.
Im working for a school project and Im stuck and I was not able to find a script snippet or an answer to my problem in google.
After uploading an image the script shows the thumbnail and the link to that image inside a text field.
<input type="text" id="imlink" name="imlink" onclick="s(this);" size="70" value="'.SURL.''.$imagesfolder.'/' . $bigboy . '">
My problem is that when I upload 10 images it takes too much time to copy each field, so what I want to do is to show the "value" of all those 10 text inputs into one single textarea.
<textarea>
my_image1.jpg
my_image2.jpg
my_image3.jpg
my_image4.jpg
my_image5.jpg
</textarea>
Is there any solution for my problem ?
thanks in advance !
The .value property can be used to extract the values for each <input /> field. These values can then be inserted into the <textarea />:
var values = "";
$("input").each(function(i) {
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
Demo.
(This can be wrapped in a function and attached as a "change event handler" on the <input /> elements.)