I have a text are in a form. I used this code
$('textarea').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
var s = $(this).val();
$(this).val(s + "<br />");
}
});
to allow users to go the next line using the enter button. I tried using both and \n
In the form, the user is able to go to a new line. However, when the input is displayed on a page, the new line doesn't show, and any text after the new line does not appear. However, it is still there- if you go to edit the form it stills shows the text typed after you click enter. I added
white-space: pre-wrap;
into the css for text boxes in my css file trying to resolve the issue. However, it still did not work. Any suggestions/ input on how to resolve this?
You don't want to insert the <br/> tag as they type. You really don't want to do anything to their text as they type. If you want to maintain their line breaks, you can convert them to <br/> tags before you inject them into an element.
$('#text').keyup(function(event) {
var text = $("#text").val();
text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
$("#result").html(text);
});
textarea {
min-width: 200px;
min-height: 200px;
float: left;
}
#result {
float: left;
border: 1px solid red;
padding: 10px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text" placeholder="Type in here"></textarea>
<div id="result"></div>
Related
Let's suppose that thete is a webpage in internet www.random-webpage.com , which contains some textual data and including hidden hyperlinks :
Example :
test test test clic here
And then , when clicking on the "here" , it opens the hyperlink www.myhyperlink.com
My purpose is to be able to COPY that whole text with ctrl+c and paste it ctrl+v inside my html textarea / input and catch the address of the hyperlink not only the text.
I Am doing it under an Angular app , but is there to handle it with js or angular
Suggestions ?
as described in this link:
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData
you should use clipboardData.getData(format) and the format is 'text/html' but first you need to bind a listener to paste event.
let see the whole code:
let box = document.getElementById('boxLikeTextarea');
let textarea = document.getElementById('textarea');
box.addEventListener('paste', function(e) {
e.preventDefault();
let html = e.clipboardData.getData('text/html');
box.innerHTML = html;
});
textarea.addEventListener('paste', function(e) {
e.preventDefault();
let html = e.clipboardData.getData('text/html');
textarea.innerHTML = html;
});
#boxLikeTextarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
<textarea id="textarea">I am a textarea</textarea>
<div id="boxLikeTextarea" contenteditable>I look like a textarea</div>
Note: because Textarea cant show link and just show text you should have a div to be like Textarea to show link in that
I am trying to make a simple text editing box so that I can eventually post text to another section of a website. I'm attempting to make buttons to make text bold, italicized, add a code box etc, (hence insertAdjacentHTML not insertAdjacentText) but I decided to just start making sure I could get plain text to print to a textarea.
I have achieved this easily but now my question becomes how do I make it so that the button still affects the text area after a user has added text to it? the code below will happily type out "hello"'s up until you click on the textarea, and from that point on it refuses to and I can't figure out why.
window.hello = function(textarea) {
var obj = document.getElementById("text");
obj.insertAdjacentHTML('beforeend', 'hello');
}
<body>
<button onclick="hello()">hello</button>
<form>
<p></p>
<textarea id="text"></textarea>
</form>
</body>
As you can read from MDN a textarea can contain only Character data.
This is the reason because you cannot use insertAdjacentHTML and instead you can use the value.
If you need to add text in bold or ... you can use a contenteditable div element.
The snippet:
window.helloDiv = function() {
var obj = document.getElementById("textDiv");
obj.insertAdjacentHTML('beforeend', 'hello');
};
window.helloTxtArea = function() {
var obj = document.getElementById("textTxtArea");
obj.value += 'hello';
}
div {
width: 300px;
height: 100px;
border: 1px;
border-style: solid;
}
textarea {
width: 300px;
height: 100px;
margin-top: 10px;
}
<button onclick="helloDiv()">helloDiv</button>
<button onclick="helloTxtArea()">helloTextArea</button>
<form>
<p></p>
<div id="textDiv" contenteditable="true"></div>
<textarea id="textTxtArea" contenteditable="true"></textarea>
</form>
I'm using a div for people to enter text and then I tried saving
div.innerText
and
div.innerHTML
to my database but when I bring it back from the database and put it back into the div all of the carriage returns or newlines are gone
innerHTML to database
a
b
c
//in database like this <div>a</div><div></div><div>b</div><div></div><div>c</div>
innerText to database
a
a
a
a
a
a
//how it stored in database aaaaaa
if you could tell me how to handle this situation I would appreciate it greatly thank you for your time
div.innerHTML creates an HTML output of your new lines using <div> containers.
Therefore the line breaks will be "replaced".
div.innerText uses the "invisible" character \n or \r\n to mark new lines and it is possible that they are not shown in your database. You can however replace them by <br> tags to see if they are there.
document.getElementById("output").addEventListener("click", function() {
console.log("HTML:");
console.log(document.getElementById("text").innerHTML);
console.log("Text:");
var text = document.getElementById("text").innerText;
console.log(text.replace(/(?:\r\n|\r|\n)/g, '<br>'));
});
#text {
background-color:#FAFAFA;
border: red solid 1px;
height:150px;
width: 200px;
}
<button id="output">
Show in console
</button>
<div id="text" contenteditable>
</div>
console.log(text.replace(/(?:\r\n|\r|\n)/g, '<br>')); replaces all different kinds of possible new lines into <br> tags.
You can substitute <textarea> element for <div> with contenteditable attribute set. Encode, decode .value of textarea using encodeURIComponent(), decodeURIComponent() or format data as JSON utilizing JSON.stringify(), JSON.parse()
var button = document.querySelector("button")
var textarea = document.querySelector("textarea");
button.onclick = function() {
var value = textarea.value
console.log(encodeURIComponent(value)
, decodeURIComponent(value)
, JSON.stringify(value)
, JSON.parse(JSON.stringify(value))
);
}
textarea {
border: 1px solid navy;
width: 300px;
height: 200px;
}
You can use
<button>click</button><br>
<textarea></textarea>
I got several buttons created in a loop dynamically.
<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name">
And i got a text field.
<textarea class="text optional special form-control" data-role="tagsinput" id="campaign_message" maxlength="180" name="campaign[message]"></textarea>
these are created by my rails application.
and this is my js code to add the value of the button into the text field
$(document).on("click",".attribute-button", function(){
var value = $('.special').val($('.special').val() + $(this).val());})
what i want to do is this;
when a button is pressed i can already write the content on the text are but what i want is to write them as non-editable texts.User shouldn't be able to modify the added text.
http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2.html
i found this lib but it didn't work out for me since it doesn't support a text are.He apply tags to all inputs.But i will have tags and input texts together.
how can i achieve this?
take a look at the awnser of this question. All you have to do is make the field readonly if you do not want people to add text.
Make textarea readonly with jquery
You can do this with a button click event
Here is my solution. There is a div with the class of tags. Inside it are divs with the class of tag and a text field with the class of newtag. When you enter text into newtag and hit space, enter or tab, a new tag div will be inserted. If you click a button with the class of attribute-button, its value will be added to a tag div. You will need to add thing to complete it such as a delete button on the tags to remove it.
Fiddle
HTML:
<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name" />
<div class="tags">
<input type="text" name="newtag" class="newtag" placeholder="Add tags" />
</div>
JS:
$(".tags, .attribute-button").click(function(){
$(".newtag").focus();
})
$(".newtag").keydown(function(e){
if(e.which === 13 || e.which === 32 || e.which === 9){
e.preventDefault();
$(".newtag").before("<div class='tag'>"+$(".newtag").val()+"</div>");
$(".newtag").val("");
}
});
$(".attribute-button").click(function(){
$(".newtag").before("<div class='tag'>"+$(this).val()+"</div>");
})
CSS (optional):
.tags{
width: 400px;
height: 100px;
border: 1px solid #000;
margin: 5px;
}
.tag{
padding: 1px;
background-color: blue;
color: #fff;
border-radius: 3px;
display: inline-block;
}
.newtag{
border: none;
outline: none !important;
}
I'm trying to create a list where users can type text in a form field, and the next form field appears underneath it everytime user presses enter. This is my code:
HTML:
<body>
<form class="list">
<input type="text" name="list">
</form>
</body>
CSS:
.list {
margin-left: auto;
margin-right: auto;
margin-top: 230px;
width: 305px;
border-radius: 2px;
}
form input {
height: 40px;
width: 300px;
background-color: blue;
color: white;
font-size: 15px;
font-family: helvetica;
}
JS:
$(document).ready(function(){
$('form input').keydown(function(e){
if(e.keyCode == 13) {
var store = $(this).val();
$(this).parents().append($('input'));
};
});
})
This gives me 2 new unformatted boxes, instead of one formatted box underneath it. Pressing "enter" on the new unformatted boxes gives me newer unformatted boxes and messes up the page. What's wrong with the code?
You have a few issues.
You are using parents which will select all parents of the element. I believe you really just want the direct parent, so use just parent. (This is why 2 elements are created instead of one as the element has 2 parents in addition to the form, body and html).
By doing append($('input')) you are appending your existing input(s) and not creating a new input. You should instead do append($('<input/>')) to create a new input and append that.
With these changes made, you now need to use on for event delegation in order to have the keydown handler affect your dynamically created inputs. (more information on event delegation in the on documentation.)
With those changes you will end up with this:
$('form').on('keydown', 'input', function(e){
if(e.keyCode == 13) {
var store = $(this).val();
$(this).parent().append($('<input/>'));
};
});
http://jsfiddle.net/XjpG7/
Instead of appending, why don't you try having the box you want to show up already in your HTML, but just hidden by default, then use jQuery to show it, something like:
$(document).ready(function(){
$('.someOtherForm').hide();
$('form input').keydown(function(e){
if(e.keyCode == 13) {
var store = $(this).val();
$('.someOtherForm').show();
};
});
})
Just be sure to also include whatever other form you want in your html file to hide and show and you should be good to go.