CCTextFieldTTF.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. /****************************************************************************
  2. Copyright (c) 2008-2010 Ricardo Quesada
  3. Copyright (c) 2011-2012 cocos2d-x.org
  4. Copyright (c) 2013-2014 Chukong Technologies Inc.
  5. http://www.cocos2d-x.org
  6. Permission is hereby granted, free of charge, to any person obtaining a copy
  7. of this software and associated documentation files (the "Software"), to deal
  8. in the Software without restriction, including without limitation the rights
  9. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10. copies of the Software, and to permit persons to whom the Software is
  11. furnished to do so, subject to the following conditions:
  12. The above copyright notice and this permission notice shall be included in
  13. all copies or substantial portions of the Software.
  14. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. THE SOFTWARE.
  21. ****************************************************************************/
  22. /**
  23. * Text field delegate
  24. * @class
  25. * @extends cc.Class
  26. */
  27. cc.TextFieldDelegate = cc.Class.extend(/** @lends cc.TextFieldDelegate# */{
  28. /**
  29. * If the sender doesn't want to attach with IME, return true;
  30. * @param {cc.TextFieldTTF} sender
  31. * @return {Boolean}
  32. */
  33. onTextFieldAttachWithIME:function (sender) {
  34. return false;
  35. },
  36. /**
  37. * If the sender doesn't want to detach with IME, return true;
  38. * @param {cc.TextFieldTTF} sender
  39. * @return {Boolean}
  40. */
  41. onTextFieldDetachWithIME:function (sender) {
  42. return false;
  43. },
  44. /**
  45. * If the sender doesn't want to insert the text, return true;
  46. * @param {cc.TextFieldTTF} sender
  47. * @param {String} text
  48. * @param {Number} len
  49. * @return {Boolean}
  50. */
  51. onTextFieldInsertText:function (sender, text, len) {
  52. return false
  53. },
  54. /**
  55. * If the sender doesn't want to delete the delText, return true;
  56. * @param {cc.TextFieldTTF} sender
  57. * @param {String} delText
  58. * @param {Number} len
  59. * @return {Boolean}
  60. */
  61. onTextFieldDeleteBackward:function (sender, delText, len) {
  62. return false;
  63. },
  64. /**
  65. * If doesn't want draw sender as default, return true.
  66. * @param {cc.TextFieldTTF} sender
  67. * @return {Boolean}
  68. */
  69. onDraw:function (sender) {
  70. return false;
  71. }
  72. });
  73. /**
  74. * A simple text input field with TTF font.
  75. * @class
  76. * @extends cc.LabelTTF
  77. *
  78. * @property {cc.Node} delegate - Delegate
  79. * @property {Number} charCount - <@readonly> Characators count
  80. * @property {String} placeHolder - Place holder for the field
  81. * @property {cc.Color} colorSpaceHolder
  82. *
  83. * @param {String} placeholder
  84. * @param {cc.Size} dimensions
  85. * @param {Number} alignment
  86. * @param {String} fontName
  87. * @param {Number} fontSize
  88. *
  89. * @example
  90. * //example
  91. * // When five parameters
  92. * var textField = new cc.TextFieldTTF("<click here for input>", cc.size(100,50), cc.TEXT_ALIGNMENT_LEFT,"Arial", 32);
  93. * // When three parameters
  94. * var textField = new cc.TextFieldTTF("<click here for input>", "Arial", 32);
  95. */
  96. cc.TextFieldTTF = cc.LabelTTF.extend(/** @lends cc.TextFieldTTF# */{
  97. delegate:null,
  98. colorSpaceHolder:null,
  99. _lens:null,
  100. _inputText:"",
  101. _placeHolder:"",
  102. _charCount:0,
  103. _className:"TextFieldTTF",
  104. /**
  105. * Constructor function, override it to extend the construction behavior, remember to call "this._super()" in the extended "ctor" function. <br />
  106. * creates a cc.TextFieldTTF from a fontName, alignment, dimension and font size.
  107. * @param {String} placeholder
  108. * @param {cc.Size} dimensions
  109. * @param {Number} alignment
  110. * @param {String} fontName
  111. * @param {Number} fontSize
  112. */
  113. ctor:function (placeholder, dimensions, alignment, fontName, fontSize) {
  114. this.colorSpaceHolder = cc.color(127, 127, 127);
  115. cc.imeDispatcher.addDelegate(this);
  116. cc.LabelTTF.prototype.ctor.call(this);
  117. if(fontSize !== undefined){
  118. this.initWithPlaceHolder("", dimensions, alignment, fontName, fontSize);
  119. if(placeholder)
  120. this.setPlaceHolder(placeholder);
  121. }else if(fontName === undefined && alignment !== undefined){
  122. this.initWithString("", arguments[1], arguments[2]);
  123. if(placeholder)
  124. this.setPlaceHolder(placeholder);
  125. }
  126. },
  127. /**
  128. * Gets the delegate.
  129. * @return {cc.Node}
  130. */
  131. getDelegate:function () {
  132. return this.delegate;
  133. },
  134. /**
  135. * Set the delegate.
  136. * @param {cc.Node} value
  137. */
  138. setDelegate:function (value) {
  139. this.delegate = value;
  140. },
  141. /**
  142. * Gets the char count.
  143. * @return {Number}
  144. */
  145. getCharCount:function () {
  146. return this._charCount;
  147. },
  148. /**
  149. * Gets the color of space holder.
  150. * @return {cc.Color}
  151. */
  152. getColorSpaceHolder:function () {
  153. return this.colorSpaceHolder;
  154. },
  155. /**
  156. * Gets the color of space holder.
  157. * @param {cc.Color} value
  158. */
  159. setColorSpaceHolder:function (value) {
  160. this.colorSpaceHolder = value;
  161. },
  162. /**
  163. * Initializes the cc.TextFieldTTF with a font name, alignment, dimension and font size
  164. * @param {String} placeholder
  165. * @param {cc.Size} dimensions
  166. * @param {Number} alignment
  167. * @param {String} fontName
  168. * @param {Number} fontSize
  169. * @return {Boolean}
  170. * @example
  171. * //example
  172. * var textField = new cc.TextFieldTTF();
  173. * // When five parameters
  174. * textField.initWithPlaceHolder("<click here for input>", cc.size(100,50), cc.TEXT_ALIGNMENT_LEFT,"Arial", 32);
  175. * // When three parameters
  176. * textField.initWithPlaceHolder("<click here for input>", "Arial", 32);
  177. */
  178. initWithPlaceHolder:function (placeholder, dimensions, alignment, fontName, fontSize) {
  179. switch (arguments.length) {
  180. case 5:
  181. if (placeholder) {
  182. this.setPlaceHolder(placeholder);
  183. }
  184. return this.initWithString(this._placeHolder,fontName, fontSize, dimensions, alignment);
  185. break;
  186. case 3:
  187. if (placeholder) {
  188. this.setPlaceHolder(placeholder);
  189. }
  190. return this.initWithString(this._placeHolder, arguments[1], arguments[2]);
  191. break;
  192. default:
  193. throw "Argument must be non-nil ";
  194. break;
  195. }
  196. },
  197. /**
  198. * Input text property
  199. * @param {String} text
  200. */
  201. setString:function (text) {
  202. text = String(text);
  203. this._inputText = text || "";
  204. // if there is no input text, display placeholder instead
  205. if (!this._inputText.length)
  206. cc.LabelTTF.prototype.setString.call(this, this._placeHolder);
  207. else
  208. cc.LabelTTF.prototype.setString.call(this,this._inputText);
  209. this._charCount = this._inputText.length;
  210. },
  211. /**
  212. * Gets the string
  213. * @return {String}
  214. */
  215. getString:function () {
  216. return this._inputText;
  217. },
  218. /**
  219. * Set the place holder. <br />
  220. * display this string if string equal "".
  221. * @param {String} text
  222. */
  223. setPlaceHolder:function (text) {
  224. this._placeHolder = text || "";
  225. if (!this._inputText.length) {
  226. cc.LabelTTF.prototype.setString.call(this,this._placeHolder);
  227. }
  228. },
  229. /**
  230. * Gets the place holder. <br />
  231. * default display string.
  232. * @return {String}
  233. */
  234. getPlaceHolder:function () {
  235. return this._placeHolder;
  236. },
  237. /**
  238. * Render function using the canvas 2d context or WebGL context, internal usage only, please do not call this function.
  239. * @param {CanvasRenderingContext2D | WebGLRenderingContext} ctx The render context
  240. */
  241. draw:function (ctx) {
  242. //console.log("size",this._contentSize);
  243. var context = ctx || cc._renderContext;
  244. if (this.delegate && this.delegate.onDraw(this))
  245. return;
  246. if (this._inputText && this._inputText.length > 0) {
  247. cc.LabelTTF.prototype.draw.call(this, context);
  248. return;
  249. }
  250. // draw placeholder
  251. var color = this.color;
  252. this.color = this.colorSpaceHolder;
  253. if(cc._renderType === cc._RENDER_TYPE_CANVAS)
  254. this._updateTexture();
  255. cc.LabelTTF.prototype.draw.call(this, context);
  256. this.color = color;
  257. },
  258. /**
  259. * Recursive method that visit its children and draw them.
  260. * @param {CanvasRenderingContext2D|WebGLRenderingContext} ctx
  261. */
  262. visit: function(ctx){
  263. this._super(ctx);
  264. },
  265. //////////////////////////////////////////////////////////////////////////
  266. // CCIMEDelegate interface
  267. //////////////////////////////////////////////////////////////////////////
  268. /**
  269. * Open keyboard and receive input text.
  270. * @return {Boolean}
  271. */
  272. attachWithIME:function () {
  273. return cc.imeDispatcher.attachDelegateWithIME(this);
  274. },
  275. /**
  276. * End text input and close keyboard.
  277. * @return {Boolean}
  278. */
  279. detachWithIME:function () {
  280. return cc.imeDispatcher.detachDelegateWithIME(this);
  281. },
  282. /**
  283. * Return whether to allow attach with IME.
  284. * @return {Boolean}
  285. */
  286. canAttachWithIME:function () {
  287. return (this.delegate) ? (!this.delegate.onTextFieldAttachWithIME(this)) : true;
  288. },
  289. /**
  290. * When the delegate detach with IME, this method call by CCIMEDispatcher.
  291. */
  292. didAttachWithIME:function () {
  293. },
  294. /**
  295. * Return whether to allow detach with IME.
  296. * @return {Boolean}
  297. */
  298. canDetachWithIME:function () {
  299. return (this.delegate) ? (!this.delegate.onTextFieldDetachWithIME(this)) : true;
  300. },
  301. /**
  302. * When the delegate detach with IME, this method call by CCIMEDispatcher.
  303. */
  304. didDetachWithIME:function () {
  305. },
  306. /**
  307. * Delete backward
  308. */
  309. deleteBackward:function () {
  310. var strLen = this._inputText.length;
  311. if (strLen == 0)
  312. return;
  313. // get the delete byte number
  314. var deleteLen = 1; // default, erase 1 byte
  315. if (this.delegate && this.delegate.onTextFieldDeleteBackward(this, this._inputText[strLen - deleteLen], deleteLen)) {
  316. // delegate don't want delete backward
  317. return;
  318. }
  319. // if delete all text, show space holder string
  320. if (strLen <= deleteLen) {
  321. this._inputText = "";
  322. this._charCount = 0;
  323. cc.LabelTTF.prototype.setString.call(this,this._placeHolder);
  324. return;
  325. }
  326. // set new input text
  327. this.string = this._inputText.substring(0, strLen - deleteLen);
  328. },
  329. /**
  330. * Remove delegate
  331. */
  332. removeDelegate:function () {
  333. cc.imeDispatcher.removeDelegate(this);
  334. },
  335. /**
  336. * Append the text. <br />
  337. * Input the character.
  338. * @param {String} text
  339. * @param {Number} len
  340. */
  341. insertText:function (text, len) {
  342. var sInsert = text;
  343. // insert \n means input end
  344. var pos = sInsert.indexOf('\n');
  345. if (pos > -1) {
  346. sInsert = sInsert.substring(0, pos);
  347. }
  348. if (sInsert.length > 0) {
  349. if (this.delegate && this.delegate.onTextFieldInsertText(this, sInsert, sInsert.length)) {
  350. // delegate doesn't want insert text
  351. return;
  352. }
  353. var sText = this._inputText + sInsert;
  354. this._charCount = sText.length;
  355. this.string = sText;
  356. }
  357. if (pos == -1)
  358. return;
  359. // '\n' has inserted, let delegate process first
  360. if (this.delegate && this.delegate.onTextFieldInsertText(this, "\n", 1))
  361. return;
  362. // if delegate hasn't process, detach with ime as default
  363. this.detachWithIME();
  364. },
  365. /**
  366. * Gets the input text.
  367. * @return {String}
  368. */
  369. getContentText:function () {
  370. return this._inputText;
  371. },
  372. //////////////////////////////////////////////////////////////////////////
  373. // keyboard show/hide notification
  374. //////////////////////////////////////////////////////////////////////////
  375. keyboardWillShow:function (info) {
  376. },
  377. keyboardDidShow:function (info) {
  378. },
  379. keyboardWillHide:function (info) {
  380. },
  381. keyboardDidHide:function (info) {
  382. }
  383. });
  384. var _p = cc.TextFieldTTF.prototype;
  385. // Extended properties
  386. /** @expose */
  387. _p.charCount;
  388. cc.defineGetterSetter(_p, "charCount", _p.getCharCount);
  389. /** @expose */
  390. _p.placeHolder;
  391. cc.defineGetterSetter(_p, "placeHolder", _p.getPlaceHolder, _p.setPlaceHolder);
  392. /**
  393. * Please use new TextFieldTTF instead. <br />
  394. * Creates a cc.TextFieldTTF from a fontName, alignment, dimension and font size.
  395. * @deprecated since v3.0 Please use new TextFieldTTF instead.
  396. * @param {String} placeholder
  397. * @param {cc.Size} dimensions
  398. * @param {Number} alignment
  399. * @param {String} fontName
  400. * @param {Number} fontSize
  401. * @return {cc.TextFieldTTF|Null}
  402. * @example
  403. * //example
  404. * // When five parameters
  405. * var textField = cc.TextFieldTTF.create("<click here for input>", cc.size(100,50), cc.TEXT_ALIGNMENT_LEFT,"Arial", 32);
  406. * // When three parameters
  407. * var textField = cc.TextFieldTTF.create("<click here for input>", "Arial", 32);
  408. */
  409. cc.TextFieldTTF.create = function (placeholder, dimensions, alignment, fontName, fontSize) {
  410. return new cc.TextFieldTTF(placeholder, dimensions, alignment, fontName, fontSize);
  411. };