I am using a contentEditable div and want to get the text inside it when a submit is called. I tried this.refs.textarea.value.trim() but that doesn't seem to work. My code is as follows in the render return
<div><form onSubmit={this.handleSubmit} id="noter-save-form" method="POST">
<div id="noter-text-area" contentEditable="true" ref="textarea">{value}</div>
and the handleSubmit function.
handleSubmit: function(e) {
e.preventDefault();
var text = this.refs.textarea.value.trim();
alert(text);
this.saveFile(text);
},
Thanks for the help. I am just looking to replace the text variable with what is actually inside the editable div.
if it's a div it doesn't matter if it's editable and should be this.refs.textarea.innerHTML and if you just want text this.refs.textarea.innerText
This works for me! hope this help
handleSubmit: function(e) {
e.preventDefault();
let text = e.currentTarget.textContent;
alert(text);
this.saveFile(text);
},
Related
I have a page where I have around 10 input-Elements. Some of them I gave the class .no-whitespace-allowed. Now I have a jQuery script running in the background with the purpose to avoid whitespaces in the very input-Elements:
$(function() {
var elements = $(".no_whitespace_allowed");
var func = function() {
if (elements.is(':focus')) elements.val(elements.val().replace(/\s/g, ''));
else elements.val(elements.val());
}
elements.keyup(func).blur(func);
});
However, it replaces the text in every input field with the result that I have the same text in all inputs. Any ideas?
$(".no_whitespace_allowed").keyup(function(){
$(this).val( $(this).val().replace(/\s/g, '') );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="no_whitespace_allowed" type="text">
Something like this ?
I am appending several buttons into an html span tag every time I type on different inputs.
<span id="pill_filters>
<button id="filterCreated">Filter name here</button>
<button id="filterCreated2">Filter name here</button>
</span>
I also wanna show a label whenever there are buttons inside of this span tag and if they aren't, I wanna hide said label.
<label id="label_sc">Search Criteria:</label>
So far my jquery is
function showSCLabel(){
if ($("#pill_filters").html.is(':empty')){
$("#label_sc").addClass("d-none");
}else{
$("#label_sc").removeClass("d-none");
}
}
But it doesnt seem to work. The label already has "d-none" class since the beginning and even with that, it is still showing. What am I doing wrong? is this not how the :empty state works? what can I use instead? I'll appreciate a lot your help!
if statement is missing ()
.html.is is invalid jQuery
Use:
if ( $("#pill_filters").is(':empty') ) {
Answer without jQuery:
//span
const span=document.getElementById("pill_filters");
//label
const label=document.getElementById("label-sc");
span.addEventListener('DOMSubtreeModified',function(){
//if innerHTML is not ""
if(span.innerHTML){
//show label
label.style.display="block";
}else{
//hide label
label.style.display="none";
};
};
I have a div with some text and I want when the cursor is hover this div to select the text. If I let this div as it is, when trying to select all (CTRL+A) then I select all page content, meaning all body text.
To get rid of this, I need to use contenteditable attribute for this div.
But I don't want to let people to change the text / copy / cut and so on
I try to use readonly for this div, but doesn't working.
Any advice please ?
PS1: This div has also other tags inside (html content), but I don't think that this is a problem.
PS2: An example is here: jsfiddle.net/msakamoto_sf/wfae8hzv/ - but with a problem. You can cut the text :(
Use event.metaKey in the keydown event to check if ctrl (or cmd on mac) keys are being pressed. You also have to disable the cut and paste events.
<div
contenteditable="true"
oncut="return false"
onpaste="return false"
onkeydown="if(event.metaKey) return true; return false;">
content goes here
</div>
You can prevent the user from cutting by handling the "cut" event and calling its preventDefault() method. This will prevent cut with any user input (including the browser's context menu or edit menu), not just via a particular key combination.
This example uses jQuery because your jsFiddle uses it:
$("#editablediv").on("cut", function(e) {
e.preventDefault();
});
set contenteditable to false and it should work !! that simple.
use contenteditable attribute for div to make it editable or not
and use readonly attr for form input elements.
<element contenteditable="true|false">
<input readonly="readonly" />
Here's an example in React, but it would work with basic HTML and JavaScript as well because I'm just leveraging the default events.
// import CSS
import './DefaultSettings.css';
// import packages
import React, { Component } from 'react';
// import components
const noop = (e) => {
e.preventDefault();
return false;
};
class DefaultSettings extends Component {
render() {
return (
<div className="DefaultSettings"
contentEditable={true}
onCut={noop}
onCopy={noop}
onPaste={noop}
onKeyDown={noop}>
</div>
);
}
}
export default DefaultSettings;
To prevent ctrl + x (Cut) from div you need to use following JQuery :
if (event.ctrlKey && event.keyCode === 88)
{
return false;
}
It will prevent to cut text from div.
Check Fiddle Here.
on user id condition set contentEditable="false"
for JavaScript,
document.getElementById(divid).contentEditable = "false";
this will work
I am trying to display a text field on clicking a link on the same page.
html file
Add another question<br/><br />
<script>
function disp_qa()
{
document.getElementById("form_d").style.display="block";
document.getElementById("form_da").style.display = "block";
}
</script>
These does not seems to work.
How can i do it?
Thanks in advance
almost there:
Add another question<br/><br />
JSFiddle: http://jsfiddle.net/vGYhE/
another way:
Add another question<br/><br />
JS:
function disp_qa(event)
{
event.preventDefault();
document.getElementById("form_d").style.display="block";
document.getElementById("form_da").style.display = "block";
}
JSFiddle: http://jsfiddle.net/vGYhE/4/
i'm doing a goto link in web page, with an input text aside it.
the goto link appear both on top and bottom of webpage.
<div class="gotopage">
goto page<input type="text" class="page_i"/>
Go
</div>
in jquery, i need to get text beside link:
$('a.Goto').live('click',function(){
window.location.href = ...;
});
how to get text value, it shouldn't be id, for id appear twice.
Use prev() to get sibling text input:
$('a.Goto').live('click',function(){
window.location.href = $(this).prev('.page_i').val();
});
Wrap the text in a span tag:
<div class="gotopage">
<span>goto page</span><input type="text" class="page_i"/>
Go
</div>
Then select it
$('a.Goto').live('click',function(){
window.location.href = $(this).closest('span').text();
});
You can get text of an input box by using this code
<script>
$('a.Goto').live('click',function(){
txt=$('.gotopage .page_i').val();
alert(txt);
});
</script>