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....... ";
Related
So I'm typing my first useful code for school right now, (I have about 1-2 years of basic coding knowledge) I know HTML and CSS, but right now I'm getting into JavaScript. I was wondering how by the press of a button, a word a user wrote in an HTML text box replaces with another word. Let's say they wrote:
"I like eating pie." In an HTML textarea element. How can I use JavaScript so I can replace the word "like" with "love" by the click of a button? Sorry if I'm bad at explaining, questions are welcomed!
So I wrote some code that does exactly what you asked for. The code is pretty simple it uses "onclick" to call a function that gets the value of the textarea replace the words (using the "replace" function of javascript) and then changes the value of the textarea with the new value (with the replaced words)
<!DOCTYPE html>
<html>
<head>
<script>
function replace(){
var text = document.getElementById("textarea").value;
var newText = text.replace("like", "love");
document.getElementById("textarea").value = newText;
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="textarea"></textarea>
<button id="button" onclick="replace();">replace</button>
</body>
</html>
Hope it help. Anything you can ask.
You will have to add the id attribute to textbox in form. like:
<form>
<input type="Text" id = "textField">
<input type = "Button" Value = "Change Text" onclick="ChangeText()">
</form>
The javaScript function(ChangeText) should have a statement:
document.getElementById('textField').Value= "I love eating pie.";
You can also use document.getElementByName().
If you want to change a single word then you can add following in ChangeText() function:
var oldtext = document.getElementById('textField').Value;
var newtext = oldText.Replace("like","love");
document.getElementById('textField').Value= newText;
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
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.
I have been trying to format string that get from the text area. I want it shows look like it original from text area input. You will see I've use many function so, please advice me if it doesn't matter to use.
PHP
$detail = nl2br(addslashes($_POST['detail']));
$detail = trim($detail);
$detail = str_replace("\r\n","",$detail);
//remove html tags except br prevent it show as html style
$detail = strip_tags($detail, '<br>');
// don't allow consequent new line
$detail = preg_replace('#(<br */?>\s*){2,}#i', '<br /><br />', $detail);
Example input string from text area, and i want it show like this when i echo $detail
#include <iostream>
using namesspace std;
int main(){
return 0;
}
The most tragic<br />
<h1> thing in the world</h1>
is a man of genius who is not a man of honor.
But below is results that I've got, I know it's because i use strip_tags. now, i have no idea please help. You will see some text disappear, <iostream> <br /> <h1> and ect.
#include
using namesspace std;
int main(){
return 0;
}
The most tragic
thing in the world
is a man of genius who is not a man of honor.
Another example if this is an input, it should display the same. but for my code, there is nothing display.
<textarea rows="7" cols="50" onkeyPress="return addP(event,this)"></textarea>
add
$detail = htmlspecialchars($detail);
for new line, use PHP_EOL variable, or replace your <br> with \n
http://php.net/manual/en/function.htmlspecialchars.php
is there a jquery selector for text that is highlighted after its dragged over by the mouse cursor? For example, I want to select text that I've typed into my textarea field, click a button, which puts <p> tags around the text I've highlighted with my mouse cursor. A non-plugin solution would be preferred, thanks.
There's a straight up javascript solution that's pretty nice... just use inputElement.selectionStart and inputElement.selectionEnd .
It's helpful to note that this is just on Dom elements, so you'll have to take your jQuery selector for your textarea and add [0] to get the element itself, ie. $("#myTextArea")[0].selectionStart.
From there you can do some string work and add in your <p> tags at the appropriate indexes.
I haven't tested this, but it should work...
var selStart = $("#myTextArea")[0].selectionStart;
var selEnd = $("#myTextArea")[0].selectionEnd;
var originalString = $("#myTextArea").val();
var segment_1 = originalString.substr(0,selStart);
var segment_2 = originalString.substr(selStart,selEnd);
var segment_3 = originalString.substr(selEnd,originalString.length);
var finalString = segment_1 + "<p>" + segment_2 + "</p>" + segment_3;
$("#myTextArea").val(finalString);
Why dont you use php for this? PHP + jQuery will help you.
Example form:
<form action="highlight.php" method="post">
My textarea:<br />
<textarea cols="10" rows="10" name="textarea"></textarea>
<input type="submit" value="Wrap <p> around" />
</form>
PHP to process the form and wrap around it:
<?php
$text = $_POST[''];
$wrap = '<p>'.$text.'</p>';
echo '<textarea cols="10" rows="10">'.$wrap.'</p>';
?>
You can remove echo $wrap, but i prefer you learn jQuery and how you can use it to execute a php script.
I Dont have that much jQuery experience to tell you how, but learn it or google "How to execute php script with jquery" and im sure you will find something =)