javascript - Focus on a textarea after custom text on a bootstrap floating modal form -



javascript - Focus on a textarea after custom text on a bootstrap floating modal form -

i using bootstrap invoke simple modal form contains textarea field , couple of buttons. setting custom text (variable length) in textarea while invoking modal form. want focus on textarea field after custom text user can start typing after that. have mentioned implemenation of below. can tell how accomplish this?

here fiddle: http://jsfiddle.net/jlymtdg8/

a bit explanation here -

here modal (all bootstrap stuff)-

<div class="modal fade" id="msg" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">close</span></button> <h4 class="modal-title" id="mymodallabel">type message</h4> </div> <div class="modal-body"> <textarea id="message" class="form-control"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">cancel</button> <button id="postmodalbutton" class="btn btn-primary btn-sm">post</button> </div> </div> </div>

and here how gets invoked -

<div class="pull-right"> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="type after this"> post message </button> </div>

this how prefilling textarea , setting focus, setting cursor on first line rather after screen_name -

$(this).on('shown.bs.modal', '#msg', setfieldandfocus) var setfieldandfocus = function () { var screen_name = $("button[data-target='#msg']").data("screenname"); $("#message").val(screen_name + " "); $("#message").focus(); };

sam can seek next javascript code:-

var screen_name = '', old_message = '', new_message = ''; $("#msg").on('shown', function() { screen_name = $("button[data-target='#msg']").data("screenname"), old_message = $.trim($('#message').val()), new_message = ( old_message.length == 0 ) ? screen_name : old_message; $("#message").focus().val(new_message + " "); });

let me explain why have used code. js fiddle link have provided understand using bootstrap 2 version, code using

$("#msg").on('shown.bs.modal', function(){ ... }

was introduced in bootstrap 3. have changed to

$("#msg").on('shown', function(){ ... }

and line

$("#message").focus().val(new_message + " ");

is used can set focus after custom text.i hope resolve issue.

javascript jquery twitter-bootstrap twitter-bootstrap-3

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more