If I'm typing text in a input field and press ENTER the default behavior of all the browsers I know is to submit the form, however if I press ENTER inside a textarea a new line is added.
Is there any way to mimic this behavior (indent, not submit the form) whenever I press TAB inside a textarea? Bespin seems to do it, but in a canvas element.
I haven't done it myself, but it seems to be possible to override the event handler and catch the key. See e.g. here.
Oh and for the JQuery crowd there even is a plugin.
Of course there's a way. Do you use any js library? If not, the idea is just to add a keydown event handler on the textarea element, check in the handler if the keyCode of the event equals 9, and if so append a "\t" to the content of the textarea. Prototype snippet:
textarea.observe('keydown', function (e) {
if(e.keyCode==9) {
e.element().insert("\t");
e.stop();
}
}
This code should work.
//'index.js' File
var textarea = document.getElementById('note');
textarea.addEventListener('keydown', function (e) {
if(e.keyCode==9) {
e.element().insert("\t");
e.stop();
}
});
If you get a 'cannot read property of null' error do this:
//'index.js' File v2
function tab() {
var textarea = document.getElementById('note');
if(event.keyCode===9) {
textarea.innerHTML += "\t";
}
}
The HTML should follow suit and look like this:
<!DOCTYPE html>
<!-- index.html -->
<!-- Don't Mind the other parts like the style and button tags -->
<!-- If you don't get the error mentioned just remove the 'onkeydown="tab()"'. -->
<html onkeydown="tab()">
<head>
<title>Calender</title>
<script src="./index.js"></script>
<style>
* {
background-color: darkgoldenrod;
color: white;
}
textarea {
background-color: white;
color: black;
}
.newNote {
background-color: olivedrab;
color: white;
border: 1px solid #000000;
box-shadow: none;
border-radius: 7.5px;
}
</style>
</head>
<body>
<button class="newNote" id="newNote" onclick="Note()">New Note</button>
<br/>
<br/>
<textarea wrap="soft" rows="30" cols="100" id="note"
placeholder="Type a Note Here!" title="Note Box"></textarea>
</body>
</html>
Related
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>
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 use a plug in to handmade a placeholder for conteditable div.
showed in demo below. If user puts in some text then click the post button, the placeholder disappeared.I wondered how to get the placeholder back after posting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="topic_content_input" contenteditable="true" autocomplete="off" spellcheck="false" data-placeholder="placeholder text" ></div>
<button id="post">Post topic</button>
<style>
#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
content: attr(data-placeholder);
float: left;
cursor:text;
margin-left: 2px;
color: rgba(134,134,134,0.6);
}
#topic_content_input{
width:521px;
padding: 10px;
border: 1px solid orange;
}
#topic_content_input:focus{
outline-style:solid;
outline-color:orange;
outline-width:0px;
line-height:normal;
}
</style>
<script>
(function ($) {
$(document).on('change keydown keypress input', '#topic_content_input[data-placeholder]', function() {
if (this.textContent) {
this.dataset.divPlaceholderContent = 'true';
}
else {
delete(this.dataset.divPlaceholderContent);
}
});
})(jQuery);
</script>
<script>
$("#post").click(function(){
$("#topic_content_input").text("");
var obj=$("#topic_content_input");
// $("#topic_content_input").add(obj.dataset.divPlaceholderContent); //my attempt, not working
})
</script>
In the CSS, rather than having #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before, you can instead put in #topic_content_input:empty:before, which will put in the placeholder whenever the div is empty, as seen in this jsfiddle.
$("#topic_content_input").add(obj.dataset.divPlaceholderContent);
why ".add" ?
you shoul use:
obj.val(obj.dataset.divPlaceholderContent)
or
obj.attr('placeholder', obj.dataset.divPlaceholderContent)
I am currently highlighting the source on my website using google's prettyprint like below on my website.
<pre class="prettyprint css">
div {
background-color: lightgreen;
width: 300px;
padding: 25px;
border: 25px solid red;
margin: 25px;
}
</pre>
I will already have some code on file but I only want to hightlight that code.
How can I highlight the same using codemirror?
as it shown in codemirror.net
create an <textarea> element, which will replace yuor current <pre> tag. set textarea to readonly if you prefer no edit.
<textarea id="myTextarea" readonly>
... your code for highlighting goes here ...
</textarea>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
lineNumbers: true
});
</script>
multiple instances selected by a common class name:
var areas = document.getElementsByClassName("myTextareaClass");
for(var i = 0; i < areas.length; i++) {
CodeMirror.fromTextArea(areas.item(i), {lineNumbers: true});
}
I need your help.
I would like to design a javascript function, such that when I call it, it will open up a dialog box asking me to navigate to the selected file, once I click on the "open" button, it will then save the file's path into a var.
How do you do this? I would NOT like to the input type="file" method, as I dont require that particular input to be on my page.
ie:
function getlocation() {
var x = popup the open file dialog box and let the user select a file
}
The only way to allow the user to select a file is to use an <input type="file" />1. You don't have to have this element visible, just on the page.
When a user selects a file, all you can get from it is its name. You cannot get its path. Also, note that file upload elements are asynchronous. You need to use the onchange event (callback) to get the name.
You can hide the upload element using display: none, and then just have another JavaScript function programmatically trigger it. (NOTE: This method doesn't work in Opera, and possibly other browsers. It was tested in Chrome, Firefox, and IE 8/9)
<style>
#getFile{
display: none;
}
</style>
<input type="file" id="getFile" />
<button id="openFile" type="button">Click Me</button>
<script>
var uploadElement = document.getElementById('getFile'),
uploadTrigger = document.getElementById('openFile'),
openFileUpload = function(){
uploadElement.click();
},
alertValue = function () {
alert(uploadElement.value);
};
if (window.addEventListener) {
uploadTrigger.addEventListener('click', openFileUpload);
uploadElement.addEventListener('change', alertValue);
} else {
uploadTrigger.attachEvent('onclick', openFileUpload);
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/rJA7n/3/show (Edit it at: http://jsfiddle.net/rJA7n/3/)
Another method that should work in most browsers (including Opera) is to make the file upload element "invisible" and put an element on top of it. So, when you click on what you think is a button, you're really clicking on the upload element. AJAX uploaders (like http://fineuploader.com/) use this method to allow you to "style" upload buttons.
<style>
#getFile{
width: 100px;
opacity: 0;
filter: alpha(opacity = 0);
}
#openFile{
display: inline;
margin-left: -100px;
background-color: red;
height: 30px;
width: 100px;
padding: 10px;
color: white;
text-align: center;
}
</style>
<input type="file" id="getFile" />
<div id="openFile">Click Me</div>
<script>
var uploadElement = document.getElementById('getFile'),
alertValue = function(){
alert(uploadElement.value);
};
if(window.addEventListener){
uploadElement.addEventListener('change', alertValue);
}
else{
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/cKGft/4/show/ (Edit it at: http://jsfiddle.net/cKGft/4/)
1 Well, you can use drag and drop if you want to be really fancy. I made a quick demo of that here: http://jsfiddle.net/S6BY8/2/show (edit it at: http://jsfiddle.net/S6BY8/2/)