如何在jQuery中的certian事件调用后自动单击我的textarea

时间:2018-10-01 06:40:16

标签: javascript jquery click focus

我的项目有问题。用户通过iframe添加youtube视频后,我想自动点击我的textarea。但是不知道该怎么办。

这就是我正在尝试的

document.getElementById('youtube_select').onclick = function () {
        var youtube = jQuery('input[name=youtube]:checked').val();
        if(youtube) {
            if(typeof(clickedElement) != "undefined"){
                clickedElement.after('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
            } else {
                jQuery('.medium-editor-element').append('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
            }

            jQuery("#textarea").focus();
        }
    }

这是在我的文本区域中添加的元素

<div class="col-xs-12">
    <div class="textarea-field editor">
        <div class="form-control textarea medium-editor-element" id="medium-editor-1538377761979" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="b41ef202-8466-bd3b-2659-be0c9528b8ef" data-placeholder="Type your text" style="height: 84px;" data-medium-focused="true"><p>uiiuiuiu</p><p><br></p><iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe><p><br></p></div>
        <textarea class="form-control textarea medium-editor-hidden" id="textarea" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" style="height: 0px;"></textarea>
    </div>
    <div class="toolbox active">
        <a href="#" id="quick-add"><img src="http://192.168.1.122/bemediav2/public/img/frontend/plus.png" alt=""></a>
        <div class="toolbox-option">
            <ul>
                <li><a id="quick-close" href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-close.png" alt=""></a></li>
                <li><a href="javascript:void(0)" id="uploadimage"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-img.png" alt=""></a></li>
                <li><a data-toggle="modal" data-target="#upload_Media" href="javascript:void(0)"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-video.png" alt=""></a></li>
                <li><a href="javascript:void(0)" data-toggle="modal" data-target="#uploadlink"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-link.png" alt=""></a></li>
                <li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-audio.png" alt=""></a></li>
                <li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-add.png" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

youtube_select ID在这里。它是模态的。当我点击upload_Media

时,点击了模式
<div class="modal fade modal-vcenter" tabindex="-1" role="dialog" id="upload_Media">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
             <h3>{{ __('sidebar.searchyoutube') }}</h3>
                <a href="#" class="modall-close" data-dismiss="modal"><img src="{{ URL::to('/') }}/img/frontend/close-icon.png" alt=""></a>
            </div>
            <div class="modal-body">
              <div class="row">
                 <div class="col-xs-12">
                     <div class="searchbox_wrapper">
                            {!! Form::open(['method'=>'POST', 'id'=>'youtubesearch']) !!}
                            <div class="search_block">
                                <input type="text" class="form-control" id="search" name="search" placeholder="{{ __('sidebar.searchyoutube') }}">
                                <input type="button" class="post_submit3" onclick="youtubesearch();">
                            </div><!-- search_block-->
                            {!! Form::close() !!}
                        </div>
                        <div class="image_container">
                         <div class="tab_row">
                                <div class="scroll_section scroll_block">
                                    <div class="row">
                                        <div class="image_list">
                                            <ul class="youtube_search"></ul>
                                        </div><!-- image_list-->
                                    </div>
                                </div><!-- scroll_section-->
                                <div class="bottom_shape"></div>
                            </div> <!-- tab_row-->
                        </div><!-- search_block-->
                        <div class="media_bottom">
                            <input type="button" class="submit_select" id="youtube_select" value="{{ __('sidebar.use') }}" data-dismiss="modal">
                            <a href="#" class="cancel_btn2" data-dismiss="modal">{{ __('sidebar.cancel') }}</a>
                        </div><!-- media_bottom-->
                    </div>
              </div>
            </div>
        </div>
    </div>
</div>

我已从这里被选中我的youtube视频

@foreach($youtubes->items as $youtube)
<li class="image_height">
    <input type="radio" name="youtube" value="{{ $youtube->id->videoId }}" id="{{ $loop->iteration }}" />
    <label class="checkbox_common" for="{{ $loop->iteration }}"><img src="{{ $youtube->snippet->thumbnails->default->url }}" alt=""/></label>
    <label class="check_tick"><img src="{{ URL::to('/') }}/img/frontend/check-tick.svg" alt=""/></label>
</li>
@endforeach

我获取视频的控制器是

public function youtubesearch(Request $request) {

        $developer_key = 'myKey';
        $youtubes = [];
        if ($request->get('search')) {
            $format_keyword = implode("+", explode(" ", $request->get('search')));

            $url = "https://www.googleapis.com/youtube/v3/search?q=$format_keyword&order=viewCount&part=snippet&type=video&maxResults=32&key=" . $developer_key;

            $arr_result = json_decode(file_get_contents($url));
            if (isset($arr_result->items) && !empty($arr_result->items)) {
                $youtubes = $arr_result;
            }
        }

        $view = View::make('frontend.include.youtube', compact('youtubes'));
        $html = $view->render();
        $response = array('html' => $html);
        return response()->json($response);
    }

4 个答案:

答案 0 :(得分:0)

您非常亲密。只需更改

jQuery("#textarea").focus();

成为:

document.getElementById('textarea').focus();

答案 1 :(得分:0)

尝试一下:

$('#textarea').trigger('click');

答案 2 :(得分:0)

尝试使用此

$('#textarea').focus();

答案 3 :(得分:0)

尝试一下,一次检查任何选项的文本区域都会集中

jQuery("input[name=youtube]").change(function() {
    if(this.checked) {
       jQuery('#textarea').focus();
    }
});