CCTextFieldTTF.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  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. _colorText: null,
  100. _lens:null,
  101. _inputText:"",
  102. _placeHolder:"",
  103. _charCount:0,
  104. _className:"TextFieldTTF",
  105. /**
  106. * Constructor function, override it to extend the construction behavior, remember to call "this._super()" in the extended "ctor" function. <br />
  107. * creates a cc.TextFieldTTF from a fontName, alignment, dimension and font size.
  108. * @param {String} placeholder
  109. * @param {cc.Size} dimensions
  110. * @param {Number} alignment
  111. * @param {String} fontName
  112. * @param {Number} fontSize
  113. */
  114. ctor:function (placeholder, dimensions, alignment, fontName, fontSize) {
  115. this.colorSpaceHolder = cc.color(127, 127, 127);
  116. this._colorText = cc.color(255,255,255, 255);
  117. cc.imeDispatcher.addDelegate(this);
  118. cc.LabelTTF.prototype.ctor.call(this);
  119. if(fontSize !== undefined){
  120. this.initWithPlaceHolder("", dimensions, alignment, fontName, fontSize);
  121. if(placeholder)
  122. this.setPlaceHolder(placeholder);
  123. }else if(fontName === undefined && alignment !== undefined){
  124. this.initWithString("", arguments[1], arguments[2]);
  125. if(placeholder)
  126. this.setPlaceHolder(placeholder);
  127. }
  128. },
  129. /**
  130. * Gets the delegate.
  131. * @return {cc.Node}
  132. */
  133. getDelegate:function () {
  134. return this.delegate;
  135. },
  136. /**
  137. * Set the delegate.
  138. * @param {cc.Node} value
  139. */
  140. setDelegate:function (value) {
  141. this.delegate = value;
  142. },
  143. /**
  144. * Gets the char count.
  145. * @return {Number}
  146. */
  147. getCharCount:function () {
  148. return this._charCount;
  149. },
  150. /**
  151. * Returns the color of space holder.
  152. * @return {cc.Color}
  153. */
  154. getColorSpaceHolder:function () {
  155. return cc.color(this.colorSpaceHolder);
  156. },
  157. /**
  158. * Sets the color of space holder.
  159. * @param {cc.Color} value
  160. */
  161. setColorSpaceHolder:function (value) {
  162. this.colorSpaceHolder.r = value.r;
  163. this.colorSpaceHolder.g = value.g;
  164. this.colorSpaceHolder.b = value.b;
  165. this.colorSpaceHolder.a = cc.isUndefined(value.a) ? 255 : value.a;
  166. },
  167. /**
  168. * Sets the color of cc.TextFieldTTF's text.
  169. * @param {cc.Color} textColor
  170. */
  171. setTextColor:function(textColor){
  172. this._colorText.r = textColor.r;
  173. this._colorText.g = textColor.g;
  174. this._colorText.b = textColor.b;
  175. this._colorText.a = cc.isUndefined(textColor.a) ? 255 : textColor.a;
  176. },
  177. /**
  178. * Initializes the cc.TextFieldTTF with a font name, alignment, dimension and font size
  179. * @param {String} placeholder
  180. * @param {cc.Size} dimensions
  181. * @param {Number} alignment
  182. * @param {String} fontName
  183. * @param {Number} fontSize
  184. * @return {Boolean}
  185. * @example
  186. * //example
  187. * var textField = new cc.TextFieldTTF();
  188. * // When five parameters
  189. * textField.initWithPlaceHolder("<click here for input>", cc.size(100,50), cc.TEXT_ALIGNMENT_LEFT,"Arial", 32);
  190. * // When three parameters
  191. * textField.initWithPlaceHolder("<click here for input>", "Arial", 32);
  192. */
  193. initWithPlaceHolder:function (placeholder, dimensions, alignment, fontName, fontSize) {
  194. switch (arguments.length) {
  195. case 5:
  196. if (placeholder)
  197. this.setPlaceHolder(placeholder);
  198. return this.initWithString(this._placeHolder,fontName, fontSize, dimensions, alignment);
  199. break;
  200. case 3:
  201. if (placeholder)
  202. this.setPlaceHolder(placeholder);
  203. return this.initWithString(this._placeHolder, arguments[1], arguments[2]);
  204. break;
  205. default:
  206. throw "Argument must be non-nil ";
  207. break;
  208. }
  209. },
  210. /**
  211. * Input text property
  212. * @param {String} text
  213. */
  214. setString:function (text) {
  215. text = String(text);
  216. this._inputText = text || "";
  217. // if there is no input text, display placeholder instead
  218. if (!this._inputText.length){
  219. cc.LabelTTF.prototype.setString.call(this, this._placeHolder);
  220. this.setColor(this.colorSpaceHolder);
  221. } else {
  222. cc.LabelTTF.prototype.setString.call(this,this._inputText);
  223. this.setColor(this._colorText);
  224. }
  225. if(cc._renderType === cc._RENDER_TYPE_CANVAS)
  226. this._updateTexture();
  227. this._charCount = this._inputText.length;
  228. },
  229. /**
  230. * Gets the string
  231. * @return {String}
  232. */
  233. getString:function () {
  234. return this._inputText;
  235. },
  236. /**
  237. * Set the place holder. <br />
  238. * display this string if string equal "".
  239. * @param {String} text
  240. */
  241. setPlaceHolder:function (text) {
  242. this._placeHolder = text || "";
  243. if (!this._inputText.length) {
  244. cc.LabelTTF.prototype.setString.call(this,this._placeHolder);
  245. this.setColor(this.colorSpaceHolder);
  246. }
  247. },
  248. /**
  249. * Gets the place holder. <br />
  250. * default display string.
  251. * @return {String}
  252. */
  253. getPlaceHolder:function () {
  254. return this._placeHolder;
  255. },
  256. /**
  257. * Render function using the canvas 2d context or WebGL context, internal usage only, please do not call this function.
  258. * @param {CanvasRenderingContext2D | WebGLRenderingContext} ctx The render context
  259. */
  260. draw:function (ctx) {
  261. //console.log("size",this._contentSize);
  262. var context = ctx || cc._renderContext;
  263. if (this.delegate && this.delegate.onDraw(this))
  264. return;
  265. cc.LabelTTF.prototype.draw.call(this, context);
  266. },
  267. /**
  268. * Recursive method that visit its children and draw them.
  269. * @param {CanvasRenderingContext2D|WebGLRenderingContext} ctx
  270. */
  271. visit: function(ctx){
  272. this._super(ctx);
  273. },
  274. //////////////////////////////////////////////////////////////////////////
  275. // CCIMEDelegate interface
  276. //////////////////////////////////////////////////////////////////////////
  277. /**
  278. * Open keyboard and receive input text.
  279. * @return {Boolean}
  280. */
  281. attachWithIME:function () {
  282. return cc.imeDispatcher.attachDelegateWithIME(this);
  283. },
  284. /**
  285. * End text input and close keyboard.
  286. * @return {Boolean}
  287. */
  288. detachWithIME:function () {
  289. return cc.imeDispatcher.detachDelegateWithIME(this);
  290. },
  291. /**
  292. * Return whether to allow attach with IME.
  293. * @return {Boolean}
  294. */
  295. canAttachWithIME:function () {
  296. return (this.delegate) ? (!this.delegate.onTextFieldAttachWithIME(this)) : true;
  297. },
  298. /**
  299. * When the delegate detach with IME, this method call by CCIMEDispatcher.
  300. */
  301. didAttachWithIME:function () {
  302. },
  303. /**
  304. * Return whether to allow detach with IME.
  305. * @return {Boolean}
  306. */
  307. canDetachWithIME:function () {
  308. return (this.delegate) ? (!this.delegate.onTextFieldDetachWithIME(this)) : true;
  309. },
  310. /**
  311. * When the delegate detach with IME, this method call by CCIMEDispatcher.
  312. */
  313. didDetachWithIME:function () {
  314. },
  315. /**
  316. * Delete backward
  317. */
  318. deleteBackward:function () {
  319. var strLen = this._inputText.length;
  320. if (strLen == 0)
  321. return;
  322. // get the delete byte number
  323. var deleteLen = 1; // default, erase 1 byte
  324. if (this.delegate && this.delegate.onTextFieldDeleteBackward(this, this._inputText[strLen - deleteLen], deleteLen)) {
  325. // delegate don't want delete backward
  326. return;
  327. }
  328. // if delete all text, show space holder string
  329. if (strLen <= deleteLen) {
  330. this._inputText = "";
  331. this._charCount = 0;
  332. cc.LabelTTF.prototype.setString.call(this,this._placeHolder);
  333. this.setColor(this.colorSpaceHolder);
  334. return;
  335. }
  336. // set new input text
  337. this.string = this._inputText.substring(0, strLen - deleteLen);
  338. },
  339. /**
  340. * Remove delegate
  341. */
  342. removeDelegate:function () {
  343. cc.imeDispatcher.removeDelegate(this);
  344. },
  345. /**
  346. * Append the text. <br />
  347. * Input the character.
  348. * @param {String} text
  349. * @param {Number} len
  350. */
  351. insertText:function (text, len) {
  352. var sInsert = text;
  353. // insert \n means input end
  354. var pos = sInsert.indexOf('\n');
  355. if (pos > -1) {
  356. sInsert = sInsert.substring(0, pos);
  357. }
  358. if (sInsert.length > 0) {
  359. if (this.delegate && this.delegate.onTextFieldInsertText(this, sInsert, sInsert.length)) {
  360. // delegate doesn't want insert text
  361. return;
  362. }
  363. var sText = this._inputText + sInsert;
  364. this._charCount = sText.length;
  365. this.string = sText;
  366. }
  367. if (pos == -1)
  368. return;
  369. // '\n' has inserted, let delegate process first
  370. if (this.delegate && this.delegate.onTextFieldInsertText(this, "\n", 1))
  371. return;
  372. // if delegate hasn't process, detach with ime as default
  373. this.detachWithIME();
  374. },
  375. /**
  376. * Gets the input text.
  377. * @return {String}
  378. */
  379. getContentText:function () {
  380. return this._inputText;
  381. },
  382. //////////////////////////////////////////////////////////////////////////
  383. // keyboard show/hide notification
  384. //////////////////////////////////////////////////////////////////////////
  385. keyboardWillShow:function (info) {
  386. },
  387. keyboardDidShow:function (info) {
  388. },
  389. keyboardWillHide:function (info) {
  390. },
  391. keyboardDidHide:function (info) {
  392. }
  393. });
  394. var _p = cc.TextFieldTTF.prototype;
  395. // Extended properties
  396. /** @expose */
  397. _p.charCount;
  398. cc.defineGetterSetter(_p, "charCount", _p.getCharCount);
  399. /** @expose */
  400. _p.placeHolder;
  401. cc.defineGetterSetter(_p, "placeHolder", _p.getPlaceHolder, _p.setPlaceHolder);
  402. /**
  403. * Please use new TextFieldTTF instead. <br />
  404. * Creates a cc.TextFieldTTF from a fontName, alignment, dimension and font size.
  405. * @deprecated since v3.0 Please use new TextFieldTTF instead.
  406. * @param {String} placeholder
  407. * @param {cc.Size} dimensions
  408. * @param {Number} alignment
  409. * @param {String} fontName
  410. * @param {Number} fontSize
  411. * @return {cc.TextFieldTTF|Null}
  412. * @example
  413. * //example
  414. * // When five parameters
  415. * var textField = cc.TextFieldTTF.create("<click here for input>", cc.size(100,50), cc.TEXT_ALIGNMENT_LEFT,"Arial", 32);
  416. * // When three parameters
  417. * var textField = cc.TextFieldTTF.create("<click here for input>", "Arial", 32);
  418. */
  419. cc.TextFieldTTF.create = function (placeholder, dimensions, alignment, fontName, fontSize) {
  420. return new cc.TextFieldTTF(placeholder, dimensions, alignment, fontName, fontSize);
  421. };