I want javascript that will automatically populate the blinking cursor in a text box on a new page, instead of having people click on the text box to type their response. I have been searching multiple forums but cannot find an answer.
Thanks!
Find the element in the DOM and call the focus method.
Something like this:
var x = document.getElementsByTagName("textarea");
if(x.length > 0)
x[0].focus();
Find working fiddle here: https://jsfiddle.net/pwse652d/
This is very simple and stupid implementation just to explain how it could be done. You might like to find element by using class selector and if using JQuery or something of like, little different then.
You don't need JavaScript to do that, although you can use it if you really want.
Just add the autofocus attribute to the textarea.
<textarea name="message" autofocus></textarea>
Alternatively, you can use JavaScript.
document.querySelector('textarea[name="message"]').focus();
Related
I know plugins exist and already made ones as well, however, I want to make one on my own. I'm stuck though cuz I'm new to jQuery/JavaScript.
Right now no matter how many characters you type in, the entire page disappears instead of showing the words that have the characters I typed. What am I doing wrong?
<div class="searchOption">
<input type="text" id="search" placeholder="search">
</div>
<div class="searchFound">
<!--upon hitting enter, this div opens collapse. -->
</div>
/*Need to get the below search code working...*/
var thePage = $(".pageContainer");
$("#search").keyup(function(){
var input = $(this).val();
console.log(input);
//if match found, make corresponding div link appear in open collapsible div,
// else say nothing found in open collapsible div
thePage.each(function(index, value){
var foundText = $(this).text().toLowerCase();
$(value).toggle(foundText.indexOf(input) >= 0);
});
});
I know toggle will make things 'toggle' for lack of a better word, however, when I use closest or match, thePage does nothing.
I'm looking for some guidance in helping me build this. Thanks!
Can you clarify what you are trying to achieve? Maybe toss a simple test case up on a site like JSBin or CodePen?
You say the entire page disappears. It sounds like you expect the display of the page to be "filtered" down to elements that match the input. Are you sure the call to thePage.each() is behaving the way you want? You may want something like thePage.children() in the mix.
http://api.jquery.com/each/
http://api.jquery.com/children/
The specifics are gonna depend on the markup and corresponding DOM tree you're working with. But if you console.log() both index and value within your call to thePage.each() I think you'll see surprising results.
I am working on nighwatch.js for web ui testing, I want to set value to a textarea, and textarea has an attribute which has my actual text, I am writing full textarea and how I am setting in following.
<div class="textarea-description">
<textarea cols="50" class="myClass setText" data-def placeholder="text to be replaced using nightwatch"/>
</div>
I am trying to set value in above textarea's attribute data-def placeholder as following ways
browser.setValue('.textarea-description textarea[type=text]','nightwatch'); or
browser.setValue('.textarea-description textarea[data-def placeholder=text]','nightwatch'); or
browser.setValue('.textarea-description textarea[type=data-def placeholder]','nightwatch');
but nothing is working.
This might not be the best solution but it works:
browser
.execute("document.querySelector('.textarea-description .myClass').setAttribute('placeholder', 'nightwatch');")
If you have jQuery you can make it a bit nicer:
browser
.execute("$('.textarea-description .myClass').attr('placeholder', 'nightwatch');")
Thank you for your all valuable suggestions, all suggestions provided by you was able to give good knowledge but unfortunately none of the suggestion worked. I have resolved it by using following.
client.setValue('.textarea-description textarea','new text to be write.');
Actually attribute "data-def placeholder" was using only watermark that was not actual text, so it is working.
You could use xpath to get the attribute.
.useXpath().setValue('//textarea[contains(#placeholder,'text to be replaced using nightwatch')]#placeholder', 'nightwatch')
How to select specified node within Xpath node sets by index with Selenium?
This worked for me.
.assert.visible('div.textarea-description textarea.setText')
.moveToElement('div.textarea-description textarea.setText', null, null)
.mouseButtonClick('left')
.keys([browser.Keys.CONTROL, "a"])
.keys([browser.Keys.CONTROL, "nightwatch"])
I would like to know if there is a jquery function that would let me create a clear icon floating next to input text inside a search box like this:
I could not find any example anywhere, I doubt that this is possible but a confirmation would be appreciated.
$('#input').keyup(function(){
$('<span id="width">').append( $(this).val() ).appendTo('body');
var width = $('#width').width() + 2;
$('#width').remove();
// variable "width" is now the margin required to be given from left to be next to the input's context
console.log(width);
});
This script creates a temporary <span> tag next to your <input> tag, with the same content as your <input> tag, therefor having the <span> tag the same width as your content.
See it in action here: http://jsfiddle.net/Wa7Lf/
The only thing you are going to have to do on your own is hovering it above the input field and adding your own icon, but that shouldn't be that hard.
I know it isn't perfect, but it should help you forward.
I think that is not really what you want but should go in the right direction.
http://demos.kendoui.com/web/multiselect/index.html
An "jQuery function" is not there I think. Eventually if you search, you will find an jQuery plugin for this. I don´t know. Take a look at jQuery UI or bootstrap or some other framework out there. Or take a look at the source from the kendo ui multiselect and build you own ;-)
May not worth adding another library just for this UI element. The other option besides the proposed jQuery UI/bootstrap/kendoui would be to add in an image with display: inline; and a small bit of margin to the left of the 'x' image.
In theory you could also do the whole element in css, but that's likely not worthwhile in your case.
I am trying to script a textarea preview (like stackoverflow) that shows in a div automatically. I have created a script, but it does not seem to be working. If anybody could help me out with the script in HTML and JavaScript I'll be greatfull.
Like this in the picture:
http://i49.tinypic.com/282qpft.jpg
Script that does not seem to be working:
http://jsbin.com/ufeqoj
Your question is vague, but maybe a few pointers will help.
You'll want to update your target div every time the user types a character. This is the onkeyup handler (or onkeydown, depending on your intended UX - probably the former).
Do you want to retain any HTML your user enters in the text area? If so, you'll want to update the innerHTML property of your target div. If you want to update just the text, change the innerText property.
A quick and dirty example using jQuery:
$("textarea#my_input").bind('keyup', function() {
$("div#target").text($(this).val());
}
As requested, in vanilla JavaScript:
document.getElementById("my_input").onkeyup = function() {
document.getElementById("target").innerText = this.value;
}
If you want to show whatever is typed in the textarea in the div below it.
You can work with Jquery .keypress() function.
Sample Fiddle.
This is just a starting point.You can alter it to suit your requirements.
For further reference Jquery .keypress()
I am using this plugin http://code.google.com/p/lwrte/, but I can not select the textarea or the id with jquery, I know it creates an iframe, but I read the docs and It does not mention anything about this issue, I just want to count the characters in the textarea and then that the user can not type, but I dont find a solution for this, has someone has a solution? what can I do?
<textarea id="message" rows="10" cols="120" class="rte1"></textarea>
$('#message').keyup(function(){ //tried with this does not work
});
any more help??
LWRTE takes textAreas and turns them into <iframe>s. So you need to use something like Google Chrome or Firebug to identify the new name of the object, then reference that directly. Something like this:
$('body iframe').contents().find('body').html()
Replace $('message') with $('#message') to get the actual element.