Search jQuery

jQuery Forum

Insert cursor on click of a button

in Using jQuery • 7 years ago

Hello,
The code below puts the Reply form and Topic form for BBPress in a slide out. I would like the cursor to be automatically inserted on these conditions.

User clicks Create Topic button, slide out opens, cursor is inserted in the Title field.

User clicks Reply, slide out opens, cursor is inserted in to Reply field/textarea.

Can you please help me modify my code so it does this?

Code in functions.php of my WordPress theme:

/*Add reply form slide out on BBPress*/
function show_form_on_click() {
    $classes = get_body_class();

    if ( is_user_logged_in() && !bbp_is_topic_closed() ) {

        if (in_array('single-forum',$classes)) { ?>
            <script type="text/javascript">
                jQuery( document ).ready(function() {
    jQuery( '<a class="custom-newtopic-button">Create Topic</a>' ).insertBefore( '#new-topic-0' );
                    jQuery('.custom-newtopic-button').click(function(){
                        jQuery('.custom-newtopic-button').hide();
                    });
                    jQuery('.custom-newtopic-button').click(function(){
                        jQuery('.bbp-topic-form').show();
                    });
                });
            </script>
        <?php } elseif(in_array('single-topic',$classes)) { ?>
            <script type="text/javascript">
                jQuery( document ).ready(function() {
                    jQuery( '<a class="custom-reply-button">Reply</a>' ).insertAfter( '.bbp-pagination' );
                    jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
                        jQuery('.custom-reply-button').hide();
                    });
                    jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
                        jQuery('.bbp-reply-form').show();
                    });
                });
            </script>
        <?php }
    }
}
add_action( 'wp_footer', 'show_form_on_click' );

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

Replies(17)

watusiware

Re: Insert cursor on click of a button

7 years ago

I would like the cursor to be automatically inserted on these conditions

I don't know what you mean by that.

- What do you mean by "cursor to be automatically inserted"?

- "automatically inserted" where?

- Under what "conditions"?

The cursor normally goes to the beginning of input fields when they are focused.

- Do you want to know how to focus to an input?

- Do you want to position the cursor to some special place within an input?

watusiware

Re: Insert cursor on click of a button

7 years ago

I re-read your post and I GUESS you just want your code to focus an input. Use the .focus() function.

It won't work on iOS devices (iPhone, iPad) in a browser. Safari Mobile will not focus without the user touching the screen.

It can be made to work in native apps (e.g. PhoneGap/Cordova) that use a webview with some help from a native plugin. I dunno about Android or other touchscreen devices.

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
Yes, I think you understand.

Click the Create Topic button, the slide out opens with the BBPress create topic form, and the cursor is inserted in to the title field automatically.

Click the Reply button, the slide out opens with the BBPress reply form, and the cursor is inserted in to the reply textarea field automatically.

Can you please help me make this happen?

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

jakecigar

Re: Insert cursor on click of a button

7 years ago

https://jsfiddle.net/jakecigar/h7sbbLns/ is a simple demo. Add more CSS or more to the form.

JΛ̊KE

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
I am just going to say this now, I know nothing about jQuery. I have added some of your code in the spot that I think is right, but when the Create Topic button is clicked, it does not insert the cursor in to the text box. I did not think I needed a class considering you specified the first input field, but maybe I am wrong.

/*Add reply form slide out on BBPress*/
function show_form_on_click() {
$classes = get_body_class();
if ( is_user_logged_in() && !bbp_is_topic_closed() ) {
if (in_array('single-forum',$classes)) { ?>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery( '<a class="custom-newtopic-button">Create Topic</a>' ).insertBefore( '#new-topic-0' );
jQuery('.custom-newtopic-button').click(function(){
jQuery('.custom-newtopic-button').hide();
jQuery('.bbp-topic-form').addClass("in").find(":input:first").focus()
});
jQuery('.custom-newtopic-button').click(function(){
jQuery('.bbp-topic-form').show();
});
});
</script>
<?php } elseif(in_array('single-topic',$classes)) { ?>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery( '<a class="custom-reply-button">Reply</a>' ).insertAfter( '.bbp-pagination' );
jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
jQuery('.custom-reply-button').hide();
});
jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
jQuery('.bbp-reply-form').show();
});
});
</script>
<?php }
}
}
add_action( 'wp_footer', 'show_form_on_click' );

So is this code correct? If not, can you please rewrite it to be correct?

Thanks for all your help.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

jakecigar

Re: Insert cursor on click of a button

7 years ago

Your code is a mix of PHP, jQuery and HTML. It is not complete, and I can’t use it.

You can update the fiddle, or read it to see how it’s done.

JΛ̊KE

jakecigar

Re: Re: Insert cursor on click of a button

7 years ago

If it is easier to share a link to your page, that would suffice. If you are developing on your localhost, you can install ngrok - secure introspectable tunnels to localhost

JΛ̊KE

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
Here you go.
http://yourtechadvisors.com/forums/forum/other/

Click login and use these details.
Username: css-tricks
Password: test#123

After logging in, you will see the Create Topic button and if you visit a topic in that forum, you will see the Reply link.

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

watusiware

Re: Insert cursor on click of a button

7 years ago

I am just going to say this now, I know nothing about jQuery.

Here is a good place to start learning:

https://learn.jquery.com/

You have been here long enough, and made enough posts, that you should have visited it a while ago...

The most important things to learn are selection, DOM traversal, and DOM manipulation. If you already know CSS selectors, that goes a long way. If you don't know CSS selectors, MDN can help fill-in the jQuery documentation:

https://developer.mozilla.org/en-US/

MDN is a great place to learn about all things HTML, CSS, and Javascript.

jakecigar

Re: Insert cursor on click of a button

7 years ago

You didn’t use any of the CSS I used. The trick is in the CSS.

JΛ̊KE

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
I thought that was HTML, sorry. I cannot see so well, I never like to make many excuses, but I really did not see it. I will check the code and post back my results.

Most of my other posts belong to another topic. I probably haven't been here but a week if that.

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
I just added your CSS, no change. What exactly am I doing wrong?

Thanks for the help.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

jakecigar

Re: Insert cursor on click of a button

7 years ago

I have no display:none div, if you want a div, it should have the CSS, and not the form.

JΛ̊KE

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
I understand you are trying to help, I have no idea what that means. What do I need to change, add, or remove to make this work?

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

jakecigar

Re: Insert cursor on click of a button

7 years ago

Make your HTML like my HTML, or change the script and css to match your code.

Maybe you should spend some time at the jQuery learning center, as watusiware suggested.

JΛ̊KE

yourtecha..

Re: Insert cursor on click of a button

7 years ago

Hello,
I will post back if I find a solution.

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

smith256

Re: Insert cursor on click of a button

7 years ago

Try this one code :

function insertAtCaret(areaId,text) {

var txtarea = document.getElementById(areaId);

var scrollPos = txtarea.scrollTop;

var strPos = 0;

var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?

"ff" : (document.selection ? "ie" : false ) );

if (br == "ie") {

txtarea.focus();

var range = document.selection.createRange();

range.moveStart ('character', -txtarea.value.length);

strPos = range.text.length;

}

else if (br == "ff") strPos = txtarea.selectionStart;

var front = (txtarea.value).substring(0,strPos);

var back = (txtarea.value).substring(strPos,txtarea.value.length);

txtarea.value=front+text+back;

strPos = strPos + text.length;

if (br == "ie") {

txtarea.focus();

var range = document.selection.createRange();

range.moveStart ('character', -txtarea.value.length);

range.moveStart ('character', strPos);

range.moveEnd ('character', 0);

range.select();

}

else if (br == "ff") {

txtarea.selectionStart = strPos;

txtarea.selectionEnd = strPos;

txtarea.focus();

}

txtarea.scrollTop = scrollPos;

}

Top Reply

Response title

Attachments

jQuery Forum

Insert cursor on click of a button

Replies(17)

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Re: Insert cursor on click of a button

Statistics

Tags

Actions

Related Posts