I want to make the string of Search Textbox of dataTables to Upper Case, not only the css, but also the string.
Can I do that ?
*note : I want the upper case as the default, even when the capslock not active
To all CSS answers, the question states that the actual property must be uppercase, not just appear that way through styling.
Here is a quick vanilla JavaScript example that should run on any modern browser:
//Function to change case
function upperCaseValue(element) {
//Test that passed element has a "value" field
if( typeof element.value !== void 0) {
//Overwrite value
element.value = element.value.toUpperCase();
}
}
//Fetch elements to watch
var search = document.getElementById("search");
var output = document.getElementById("output");
//Bind events
search.addEventListener("keyup", function(){
//Change case
upperCaseValue(search);
//Use input
output.innerHTML = search.value;
});
search.addEventListener("change", function(){
//Change case
upperCaseValue(search);
//Use input
output.innerHTML = search.value;
});
#search {
text-transform: uppercase;
}
<input name="search" id="search" />
<p id="output"></p>
Add this style to your input element.
HTML
<input name="search" id="search" />
CSS
#search {
text-transform: uppercase;
}
just add this styling
.dataTables_wrapper .dataTables_filter input
{
text-transform:uppercase;
}
fiddle link fiddle
Related
I am creating a contenteditable paragraph in html. I have a button which on clicking will make the text bold. The first time it is clicked the text should change to bold,and the next time it is clicked ,the text should be normal(not bolder).This is similar to the Stack overflow question editor.html code:
<button type="button" id="bold" onclick="bold()">B</button>
<div id="content">
<p id="hey" contenteditable="true">Hi how are you</p>
</div>
JS:
let boldClick=0;
let p=document.getElementById('hey');
function bold(){
if(boldClick%2==0){
p.innerHTML=p.innerHTML+' <span contenteditable="true">'+' boldtext'+'</span>';
}
else{
let pNew=document.createElement('p');
pNew.setAttribute("contenteditable","true");
document.getElementById('content').appendChild(pNew);
}
boldClick++;
}
CSS:
#bold{
font-weight: bold;
}
span{
font-weight: bold;
background-color: grey;
}
p{
display: inline;
}
I can make the text bolder by clicking the button.Bolder texts must be inside the span element and non-bolder texts must be outside span but inside
p element.How do I solve it?
approach 1:
let boldClick=0;
let p=document.getElementById('hey');
p.innerHTML=p.innerHTML+' <span contenteditable="true" id="bold">'+' boldtext'+'</span>';
const boldTag = document.getElementById('bold');
function bold(){
if(boldClick%2==0){
boldTag.style.fontWeight="";
}
else{
boldTag.style.fontWeigh="bold";
}
boldClick++;
}
approach 2:
let boldClick=0;
let p=document.getElementById('hey');
p.innerHTML=p.innerHTML+' <span contenteditable="true" id="bold">'+' boldtext'+'</span>';
const boldTag = document.getElementById('bold');
function bold(){
if(boldClick%2==0){
boldTag.id="";
}
else{
boldTag.id="bold";
}
boldClick++;
}
these approaches are not optimized , but hope you get the concept .
the shortest way. Create a class named Bold. Add the properties you want to this class. Select elements with Javascript and assign a function to have this class.
In general , creating a class with css and using javascript is the simplest way to solve problems, which element of this class should be added when.
let clicked = false;
function bold() {
let paragraph = document.getElementById("paragraph");
let span = document.getElementById("span");
if (clicked) {
span.contentEditable = false;
span.classList.remove("bold");
clicked = false;
} else {
span.contentEditable = true;
span.classList.add("bold");
clicked = true;
}
}
p {
display: inline;
}
.bold {
font-weight: bold;
}
<button type="button" id="bold-button" onclick="bold()">B</button>
<div id="content">
<p id="paragraph">Hi how are you
<span id="span">how are you</span>
</p>
</div>
First off, please tag your post with java script instead of java, similar name, different language. Here is the code you should use:
let isBold = false;
let p=document.getElementById('hey');
function bold(){
if(isBold == false){
p.style.fontWeight = "bold";
isBold = true;
}
else{
p.style.fontWeight = "normal";
isBold = false;
}
}
It changes the font weight (if it is bold or not) instead of the complex code you had. If you are just turning something on and off (bold or not) then use a boolean value (true + false) true will make it bold, false will make it normal. For HTML graphics, you should use CSS language. You can change the variable's CSS values by saying style then the thing you want to change.
I want to access the text within an ElInput component via Javascript in Electron. According to mozilla it is impossible to access information within an html input or textfield via window.getSelection.
I unsuccessfully tried to access the selection with the proposed selectionStart
const input = document.getElementById("input")
alert(input.selectionStart.toString)
Given that this doesn't work, what do I have to do, to get the text in my selection within my el-input?
<input value="try to select some of the text" onclick="console.log(this.value.substring(this.selectionStart, this.selectionEnd))"/>
You can use .native event handlers as described in Vue.js + Element UI: Get "event.target" at change, and then selectionStart/End of the underlying HTML element will work:
var Main = {
data() {
return {
input: 'Select something.'
}
},
methods: {
dothing(event) {
let elem=event.target;
console.log(elem.value.substring(elem.selectionStart,elem.selectionEnd));
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.13.0/lib/index.js"></script>
<div id="app">
<el-input v-model="input" #mouseup.native="dothing"></el-input>
</div>
Checkout this short video I have made from the ELInput link you provided, the explanation in general is:
Without seeing your html is a bit hard, but I am guessing you don't even have an input with an id of 'input' which is what your javascript code is querying for:
const input = document.getElementById("input")
Looking at the html on the ElInput link you have provided, those inputs have a class of el-input__inner, you can select the input by class with
const input = document.getElementsByClass("el-input__inner")
but this will return an array of elements, you need to make sure you are selecting the one you need (you can select by Id if you have actually added an id tag to the input element, also this is the reason you see a [1] in the video, it is selecting the element in that position of the array).
from there you can select your text inside the input element, and from javascript get the range of the selection with: input.selectionStart and input.selectionEnd
Having those you can now get the substring with input.value.substr(input.selectionStart, input.selectionEnd) and from there do whatever you need with the text.
Based on this answer: How to get selected text from textbox control with javascript you can use Document.querySelectorAll() to get all elements you need. You can use class names, ids or tag names and so on. Then iterate over them with forEach and add the EventListener you need. Inside the forEach loop you can do whatever you like with any given element
UPDATE
Unfortunately the first solution did not work in Firefox. (see further down) This solution should work in more browsers.
var mySpecialSelect = function(element){
element.addEventListener('mouseup', function () {
let startPos = element.selectionStart;
let endPos = element.selectionEnd;
let field_value = element.value;
let selectedText = field_value.substring(startPos,endPos);
if(selectedText.length <= 0) {
return; // stop here if selection length is <= 0
}
// log the selection
console.log(selectedText);
// you can use "element" or "this" to do whatever like toggle a class name
element.classList.toggle('used-this-element');
});
};
var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(mySpecialSelect);
var inputElements = document.querySelectorAll('input');
[...inputElements].forEach(mySpecialSelect);
textarea,
input {
border: solid 2px gray;
}
input {
display: block;
width: 100%;
}
.used-this-element {
border: solid 2px orange;
}
<textarea rows="4" cols="50">Select some text from here and check the console</textarea>
<textarea rows="4" cols="50">Another text Box, Select some text from here and check the console</textarea>
<input type="text" value="Select or change this value">
First solution (hidden in the "Show code snippet") unfortunately window.getSelection() did not work in Firefox. I'll keep this solution here just because maybe someday it will work and then this would be the nicer solution.
var mySpecialSelect = function(element){
element.addEventListener('mouseup', function () {
if(window.getSelection().toString().length <= 0) {
return; // stop here if selection length is <= 0
}
// log the selection
console.log(window.getSelection().toString());
// you can use "element" or "this" to do whatever like toggle a class name
element.classList.toggle('used-this-element');
});
};
var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(mySpecialSelect);
var inputElements = document.querySelectorAll('input');
[...inputElements].forEach(mySpecialSelect);
textarea,
input {
border: solid 2px gray;
}
input {
display: block;
width: 100%;
}
.used-this-element {
border: solid 2px orange;
}
<textarea rows="4" cols="50">Select some text from here and check the console</textarea>
<textarea rows="4" cols="50">Another text Box, Select some text from here and check the console</textarea>
<input type="text" value="Select or change this value">
I have a multi-page form with some input with required attribute. I want to hide or show buttons if input with required attribute are empty or not.
How can I do this with javascript?
Elements that fail validation will match the :invalid pseudoselector. You can match on that to hide the next element:
input:invalid {
border-color: red;
}
input:invalid + span {
display: none;
}
<input required>
<span>
<button>Submit</button>
</span>
If you have multiple elements and you want to show or hide something based on whether anything is bad, you should know that the <form> containing :invalid elements is also :invalid:
input:invalid {
border-color: red;
}
input:valid + span {
display: none;
}
form:invalid + div {
display: none;
}
<form>
<input required>
<span>First name required!</span>
<br>
<input required>
<span>Last name required!</span>
<br>
</form>
<div>
<button>Submit</button>
</div>
You should probably rename your question as it has nothing to do with "required message showing". In your case, you can try something like this:
var handlerFunction = function () {
var elements = document.querySelectorAll("#myForm input");
var isEmpty = false;
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === '') {
hideButtons();
isEmpty = true;
break;
}
}
if (!isEmpty) {
showButtons();
}
};
var hideButtons = function () {
// hide buttons
};
var showButtons = function () {
// show buttons
};
var elements = document.querySelectorAll("#myForm input");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("keydown", handlerFunction);
}
To use it you have to change #myForm to your form's id or class.
Here's the javascript solution that you wanted, but the solution above that uses css is a lot better (in case you don't need to use javascript).
I would get the input and see if the content is equal to empty:
document.getElementById('inputRequire').innerText == '';
document.getElementById('inputRequire').value == '';
and then i show the other:
var hiddenElements = document.getElementsByTagName('hiddenOnes');
foreach(...){
element.style.display = 'block';
}
Something like that, i don't test the code but i think it can help you
I'm trying to write a simple web text editor.
what I want to do is let the user type on a textarea (or a textarea-like input) and select text with the mouse or with shift key and click a button to apply a color based effects.
my questions are such:
how do I capture the selection in a way it's not lost when the
button is clicked
how to save the text and the selection
how to make it WYSIWYG
p.s. I don't want a full rich text editor. I need only one effect
thanks
how do I capture the selection in a way it's not lost when the button is clicked
how to save the text and the selection
I credit this completely to #TimDown's answer to a different question here. It replace the current selection with another string.
We create the string by taking the value of the color picker and putting it in a span tag and inserting the current selected text.
how to make it WYSIWYG
Use a contenteditable div and funnel the output to a hidden textarea when the form submits.
Here it is all together. Again, the first function replaceSelection() is not my code.
document.getElementById('color').onchange = function() {
var replace = document.createElement('span');
replace.style.color = this.value;
replace.textContent = window.getSelection().toString();
replaceSelection(replace.outerHTML, true);
}
document.getElementById('wysiwyg').onsubmit = function() {
document.getElementById('result').textContent = document.getElementById('#input').innerHTML;
}
// #TimDown
function replaceSelection(html, selectInserted) {
var sel, range, fragment;
sel = window.getSelection();
// Test that the Selection object contains at least one Range
if (sel.getRangeAt && sel.rangeCount) {
// Get the first Range (only Firefox supports more than one)
range = window.getSelection().getRangeAt(0);
range.deleteContents();
// Create a DocumentFragment to insert and populate it with HTML
// Need to test for the existence of range.createContextualFragment
// because it's non-standard and IE 9 does not support it
if (range.createContextualFragment) {
fragment = range.createContextualFragment(html);
} else {
// In IE 9 we need to use innerHTML of a temporary element
var div = document.createElement("div"), child;
div.innerHTML = html;
fragment = document.createDocumentFragment();
while ( (child = div.firstChild) ) {
fragment.appendChild(child);
}
}
var firstInsertedNode = fragment.firstChild;
var lastInsertedNode = fragment.lastChild;
range.insertNode(fragment);
if (selectInserted) {
if (firstInsertedNode) {
range.setStartBefore(firstInsertedNode);
range.setEndAfter(lastInsertedNode);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
}
#input {
min-height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 1px;
}
#result {
display: none;
}
#wysiwyg input[type="submit"] {
height: 2em;
float: right;
}
<form action="" method="post" id="wysiwyg">
<div id="input" contenteditable="true"></div>
<textarea name="result" id="result"></textarea>
<input type="color" id="color" />
<input type="submit" value="submit" />
</form>
how do I capture the selection in a way it's not lost when the button is clicked
You can get the selected text by using window.getSelection method.
how to save the text and the selection
Save it in a variable.
Ex: var selection = window.getSelection().toString();
how to make it WYSIWYG
You can perform different actions like bolding, underlining or italizing the text (and many other actions) by using window.execCommand method.
I created a simple wysiwyg editor which does bold, underline and italic the selected text.
Check it here.
i would like to replicate that you see a regular input text and when you click it changes into textarea.
is this a hidden layer or is it actually changing the input to textarea? how to do it?
I do believe it's always a textarea and on focus they just change the height of the textarea.
Edit: yes, it is. They use scripting to do everything with a textarea, there is no input field.
<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer && UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>
One method that I found was to have a text area that begins with a smaller width and height and then to dynamically resize it.
function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
then you would call your function with an onclick event
onclick="function sz(this)"
I found this here
Fellgall Javascript
One problem that he does mention is that this only functions on browsers that support it.
You can combine the jQuery widget you can find here with some coding
Example:
<div id="myform">
<form>
<textarea></textarea>
<button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
var widget = $('#myform textarea');
var button = $('#myform button');
var tarea = widget[0];
// turn the textarea into an expandable one
widget.expandingTextArea();
var nullArea = true;
tarea.value = "What's on your mind?";
widget.focus(function() {
button.css('display', 'block');
if (nullArea) {
tarea.value = "";
nullArea = false;
}
});
widget.blur(function() {
if ($.trim(tarea.value) == "") {
tarea.value = "What's on your mind?";
button.css('display', 'none');
nullArea = true;
}
});
});
</script>
This code will hide by default the post button and will show it only when the textarea is focused or when you already have written something into it (you may want to hide/show a div instead or anything you want).
If jQuery is an option for you at all, there's a jQuery plugin that does just this called Jeditable.
Check out the demos here.
One way to do this is to code a dynamic textarea. This article explains how to do it: http://www.felgall.com/jstip45.htm
Another way to do it is to change the type of the object. Let's say you place your input text in a div tag (its ID being "commentBox". The code would then be:
//when you click on the textbox
function makeTextArea()
{
document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
document.forms[0].getElementById("comments").focus();
}
//when you click outside of the textarea
function backToTextBox()
{
document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}