I want to enter text in this text box with Puppeteer. I was using this xpath //div[#class='ui input custom-input-form content--translatable-variable-name:-field'] but this does not work.
const title = await page.$x("//div[#class='ui input custom-input-form content--translatable-variable-name:-field']");
await title[0].type("Test");
<div class="RichEditor-editor content--translatable-question-text:-field"><div class="DraftEditor-root"><div class="DraftEditor-editorContainer"><div aria-describedby="placeholder-3d1bl" class="notranslate public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="false" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"><div data-contents="true"><div class="" data-block="true" data-editor="3d1bl" data-offset-key="e9fsv-0-0"><div data-offset-key="e9fsv-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="e9fsv-0-0"><br data-text="true"></span></div></div></div></div></div></div></div>
Related
Assuming I have a button and a textarea. The normal state of textarea placeholder is gray. When click on the button it should change the placeholder to black. How can I do it?
::placeholder is the pseudo class that will control the placeholder text of an input... You can set this in a class and then toggle the class or add the class to your element on click.
let ta = document.getElementById('ta')
function changeTAText(){
// the following would toggle on each click
//=> ta.classList.toggle('placeHolderText')
// The following would add it without the
// ability to toggle on click
ta.classList = 'placeHolderText';
}
btn.addEventListener("click", changeTAText)
.placeHolderText::placeholder {
color: black;
}
<textarea id="ta" placeholder="enter your text here"></textarea>
<button id="btn">Change Color of Placeholder Text</button>
I will post the partial code to make the placeholder red. Add a button and toggle the class of textarea placeholder-red on button click.
textarea.placeholder-red::placeholder {
color: red;
}
<textarea rows="4" cols="50" class="placeholder-red" placeholder="Describe yourself here..."></textarea>
This question already has answers here:
How to wrap text of HTML button with fixed width?
(8 answers)
Button overflow hidden not working
(4 answers)
Closed 3 years ago.
The input overflows the parent container when the text is too long.
I am looking at how to wrap the text inside of the element. I tried word-break, text-wrap but nothing worked.
<div>
<input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
</div>
white-space:normal seems to work fine in Chrome, Firefox, IE and Edge …
div { width: 400px; }
input[type=submit] { white-space:normal; }
<div>
<input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
</div>
Just specify a max-width on the button:
.submit {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.container {
width: 300px;
}
<div class="container">
<input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text" />
</div>
Notice that you can also style the overflow using the text-overflow property.
I have a sequence of letters with numbers on top of each letter. I want to disable text selection, so that when the user copy paste the sequence of letters from the screen, he does not get numbers.
I'm actually using no select css trick and the numbers are excluded from selection, but I get a space where the number was. Like so:
T
QD
The desired output is instead:
TQD
Here is my code:
<div style="margin-bottom:0px;font-size: 0.65vw;">
<div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size:0.6vw;padding-top: 2px; height:0.6vw;">1</p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">T</span></div>
<div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size:0.6vw;padding-top: 2px; height:0.6vw;">2</p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">Q</span></div>
<div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size: 0.6px;padding-top: 2px;height:0.6vw;"></p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">D</span></div></div>
Is there any css trick for this?
If you can disable the ctrl button and right click from a webpage then the functionality copy paste will automatically disable. I think the following code will help you.
<script>
$(window).on('keydown',function(event)
{
if(event.keyCode==123)
{
alert(' Developer Tools is disable from this website.');
return false;
}
else if(event.keyCode==17)
{
alert('Control key is disable from this website.');
return false;
}
});
$(document).on("contextmenu",function(e)
{
alert('Right click is disable from this website!')
e.preventDefault();
});
</script>
I've found the solution! I'm using the tag p which is a block element, this is why it will leave a space where the tag was. On the contrary, using some inline element such as b or span will not leave any space.
I have a placeholder in a page but am having trouble replacing the text with CSS. The input color, size, and font-style changes, but not the content? How can I replace the placeholder content?
input::placeholder {
color: black;
font-style: italic;
content:"This isn't changing";
}
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
As far as I can tell from looking at the docs you can not update the content through css for placeholder
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
You could consider using js to update the placeholder.
document.getElementsByName('job_location')[0].placeholder='new text';
I have tested this in latest chrome and IE11.
It is possible to select a text in an input, and then drag it to another input, in at least IE11 and chrome.
And I want to prevent this.
I have found lots of examples/tutorials showing how to prevent the opposite in examples on how to implement drag and drop: Allowing drag, while preventing text selection.
But I want to allow text selection on mouse drag - but prevent the selected text to be draggable.
Setting the css property -webkit-user-drag: none; also prevents text selection, where I would have expected that the property: -webkit-user-select: auto; would control the prevention of text selection.
Here is a jsfiddle: https://jsfiddle.net/9g419erc/
input {
-webkit-user-select: auto;
user-select: auto;
-webkit-user-drag: none;
}
<article>
<input type="text" placeholder="Write text, select it, and drag">
<input type="text" placeholder="Then drop text here">
</article>
A solution using css3 only is preferred
Add ondrop="return false;" to those elements where you want to disable dropping text.
input {
-webkit-user-select: auto;
user-select: auto;
-webkit-user-drag: none;
}
<article>
<input type="text" placeholder="Write text, select it, and drag" >
<input type="text" placeholder="Then drop text here" ondrop="return false;">
</article>